Commiting

app/javascript/gabsocial/layouts/explore_layout.js

@@ -5,7 +5,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import throttle from 'lodash.throttle'
 import Sticky from 'react-stickynode'
 import { me } from '../initial_state'
-import { BREAKPOINT_EXTRA_SMALL } from '../constants'
+import {
+  BREAKPOINT_EXTRA_SMALL,
+  LAZY_LOAD_SCROLL_OFFSET,
+} from '../constants'
 import Layout from './layout'
 import SidebarPanelGroup from '../components/sidebar_panel_group'
 import Responsive from '../features/ui/util/responsive_component'
@@ -43,14 +46,12 @@ class ExploreLayout extends ImmutablePureComponent {
     if (this.window) {
       const { scrollTop } = this.documentElement
       
-      if (scrollTop > 25 && !this.state.lazyLoaded) {
+      if (scrollTop > LAZY_LOAD_SCROLL_OFFSET && !this.state.lazyLoaded) {
         this.setState({ lazyLoaded: true })
         this.detachScrollListener()
       }
     }
-  }, 150, {
-    trailing: true,
-  })
+  }, 150, { trailing: true })
 
   render() {
     const { children, title } = this.props
@@ -67,7 +68,7 @@ class ExploreLayout extends ImmutablePureComponent {
       <WrappedBundle component={GroupsPanel} componentParams={{ groupType: 'featured' }} />,
     ]
     if (!!me) {
-      layout.push(<WrappedBundle component={UserSuggestionsPanel} componentParams={{ suggestionType: 'verified' }} />)
+      layout.push(<WrappedBundle component={UserSuggestionsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded, suggestionType: 'verified' }} />)
     }
     layout.push(<WrappedBundle component={TrendsBreakingPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />)
 

app/javascript/gabsocial/layouts/layout.js

@@ -40,13 +40,15 @@ class Layout extends React.PureComponent {
       title,
     } = this.props
 
+    const noPaddingPages = ['group', 'messages']
+    const hasPadding = noPaddingPages.indexOf(page) === -1
     const mainBlockClasses = CX({
       d: 1,
       w1015PX: 1,
       flexRow: 1,
       jcEnd: 1,
-      py15: page !== 'group',
-      pb15: page === 'group',
+      py15: hasPadding,
+      pb15: hasPadding,
     })
 
     return (

app/javascript/gabsocial/layouts/messages_layout.js

@@ -0,0 +1,96 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { me } from '../initial_state'
+import {
+  CX,
+  BREAKPOINT_EXTRA_SMALL,
+} from '../constants'
+import Layout from './layout'
+import Responsive from '../features/ui/util/responsive_component'
+import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
+import MessagesSearch from '../features/messages/components/messages_search'
+import MessagesList from '../features/messages/components/messages_list'
+import MessagesHeader from '../features/messages/components/messages_header'
+
+class MessagesLayout extends ImmutablePureComponent {
+
+  render() {
+    const {
+      children,
+      showBackBtn,
+      title,
+    } = this.props
+
+    const mainBlockClasses = CX({
+      d: 1,
+      w1015PX: 1,
+      h100PC: 1,
+      flexRow: 1,
+      jcEnd: 1,
+    })
+
+    return (
+      <Layout
+        showBackBtn
+        showGlobalFooter
+        noRightSidebar
+        showLinkFooterInSidebar
+        page='messages'
+        title='Chats'
+        actions={[
+          {
+            icon: 'cog',
+            onClick: this.onOpenCommunityPageSettingsModal,
+          },
+          {
+            icon: 'pencil',
+            onClick: this.onOpenCommunityPageSettingsModal,
+          },
+        ]}
+      >
+        <div className={[_s.d, _s.flexRow, _s.w100PC, _s.calcH53PX].join(' ')}>
+          <ResponsiveClassesComponent
+            classNames={[_s.d, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesSmall={[_s.d, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesXS={[_s.d, _s.w100PC].join(' ')}
+          >
+            <ResponsiveClassesComponent
+              classNames={mainBlockClasses}
+              classNamesXS={[_s.d, _s.w100PC, _s.jcEnd].join(' ')}
+            >
+
+              <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+                <div className={[_s.d, _s.w340PX, _s.h100PC, _s.bgPrimary, _s.borderLeft1PX, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}>
+                  <div className={[_s.d, _s.w340PX].join(' ')}>
+                    
+                    { /* <MessagesHeader /> */ }
+                    <MessagesSearch />
+                    <MessagesList />
+
+                  </div>
+                </div>
+              </Responsive>
+
+              <div className={[_s.d, _s.flexGrow1, _s.h100PC, _s.bgPrimary, _s.borderColorSecondary, _s.borderRight1PX, _s.z1].join(' ')}>
+                <div className={[_s.d, _s.w100PC, _s.h100PC].join(' ')}>
+                  {children}
+                </div>
+              </div>
+            </ResponsiveClassesComponent>
+          </ResponsiveClassesComponent>
+        </div>
+      </Layout>
+    )
+  }
+
+}
+
+MessagesLayout.propTypes = {
+  children: PropTypes.node,
+  showBackBtn: PropTypes.bool,
+  title: PropTypes.string,
+}
+
+export default MessagesLayout

app/javascript/gabsocial/layouts/profile_layout.js

@@ -4,8 +4,12 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Sticky from 'react-stickynode'
+import throttle from 'lodash.throttle'
 import { me } from '../initial_state'
-import { CX } from '../constants'
+import {
+  CX,
+  LAZY_LOAD_SCROLL_OFFSET,
+} from '../constants'
 import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
 import FooterBar from '../components/footer_bar'
 import ProfileHeader from '../components/profile_header'
@@ -26,6 +30,37 @@ import {
 
 class ProfileLayout extends ImmutablePureComponent {
 
+  state = {
+    lazyLoaded: false,
+  }
+
+  componentDidMount() {
+    this.window = window
+    this.documentElement = document.scrollingElement || document.documentElement
+
+    this.window.addEventListener('scroll', this.handleScroll)
+  }
+
+  componentWillUnmount() {
+    this.detachScrollListener()
+  }
+
+  detachScrollListener = () => {
+    this.window.removeEventListener('scroll', this.handleScroll)
+  }
+
+  handleScroll = throttle(() => {
+    if (this.window) {
+      const { scrollTop } = this.documentElement
+      
+      if (scrollTop > LAZY_LOAD_SCROLL_OFFSET && !this.state.lazyLoaded) {
+        this.setState({ lazyLoaded: true })
+        this.detachScrollListener()
+      }
+    }
+  }, 150, { trailing: true })
+
+
   render() {
     const {
       account,
@@ -34,6 +69,7 @@ class ProfileLayout extends ImmutablePureComponent {
       unavailable,
       noSidebar,
     } = this.props
+    const { lazyLoaded } = this.state
 
     const mainContentClasses = CX({
       d: 1,
@@ -121,7 +157,7 @@ class ProfileLayout extends ImmutablePureComponent {
                           <div className={[_s.d, _s.w340PX].join(' ')}>
                             <WrappedBundle component={ProfileStatsPanel} componentParams={{ account }} />
                             <WrappedBundle component={ProfileInfoPanel} componentParams={{ account }} />
-                            { !unavailable && <WrappedBundle component={MediaGalleryPanel} componentParams={{ account }} /> }
+                            { !unavailable && <WrappedBundle component={MediaGalleryPanel} componentParams={{ account, isLazy: true, shouldLoad: lazyLoaded }} />}
                             { !me && <WrappedBundle component={SignUpPanel} /> }
                             <WrappedBundle component={LinkFooter} />
                           </div>