Updated HomePage sidebar panels to lazy load

• Updated:
- HomePage sidebar panels (WhoToFollowPanel, ListsPanel, GroupsPanel) to lazy load on scroll of 25px. Otherwise, dont load.
- WhoToFollowPanel, ListsPanel, GroupsPanel have functionality to load data once

• Added:
- List component has showLoading prop

• Removed:
- Unused IntersectionObserver code in HomePage

app/javascript/gabsocial/components/list.js

@@ -21,6 +21,7 @@ export default class List extends ImmutablePureComponent {
     ]),
     onLoadMore: PropTypes.func,
     hasMore: PropTypes.bool,
+    showLoading: PropTypes.bool,
   }
 
   render() {
@@ -30,7 +31,8 @@ export default class List extends ImmutablePureComponent {
       emptyMessage,
       hasMore,
       size,
-      onLoadMore
+      onLoadMore,
+      showLoading,
     } = this.props
 
     const Wrapper = !!scrollKey ? ScrollableList : Dummy
@@ -42,6 +44,7 @@ export default class List extends ImmutablePureComponent {
           hasMore={hasMore}
           scrollKey={scrollKey}
           emptyMessage={emptyMessage}
+          showLoading={showLoading}
         >
           {
             items.map((item, i) => (

app/javascript/gabsocial/components/panel/groups_panel.js

@@ -30,6 +30,7 @@ class GroupSidebarPanel extends ImmutablePureComponent {
     isLazy: PropTypes.bool, 
     isSlim: PropTypes.bool,
     onFetchGroups: PropTypes.func.isRequired,
+    shouldLoad: PropTypes.bool,
   }
 
   state = {
@@ -40,38 +41,39 @@ class GroupSidebarPanel extends ImmutablePureComponent {
     'groupIds',
     'isLazy',
     'isSlim',
+    'shouldLoad',
   ]
 
-  componentDidMount() {
-    if (!this.props.isLazy) {
-      this.props.onFetchGroups('member')
-    }
-  }
-
   static getDerivedStateFromProps(nextProps, prevState) {
-    if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) {
-      return {
-        fetched: true
-      }
+    if (nextProps.shouldLoad && !prevState.fetched) {
+      return { fetched: true }
     }
 
     return null
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
-    if (!prevState.fetched && this.state.fetched && this.props.isLazy) {
+    if (!prevState.fetched && this.state.fetched) {
       this.props.onFetchGroups('member')
     }
   }
 
+  componentDidMount() {
+    if (!this.props.isLazy) {
+      this.props.onFetchGroups('member')
+      this.setState({ fetched: true })
+    }
+  }
+  
   render() {
     const { intl, groupIds, slim } = this.props
-    const count = groupIds.count()
-
-    if (count === 0) return null
+    const { fetched } = this.state
 
+    const count = !!groupIds ? groupIds.count() : 0
     const maxCount = slim ? 12 : 6
 
+    if (count === 0 && fetched) return null
+
     return (
       <PanelLayout
         title={intl.formatMessage(messages.title)}
@@ -81,9 +83,12 @@ class GroupSidebarPanel extends ImmutablePureComponent {
         footerButtonTo={count > maxCount ? '/groups/browse/member' : undefined}
         noPadding={slim}
       >
-        <ScrollableList scrollKey='groups_panel'>
+        <ScrollableList
+          scrollKey='groups_panel'
+          showLoading={!fetched}
+        >
           {
-            groupIds.slice(0, maxCount).map((groupId, i) => (
+            groupIds && groupIds.slice(0, maxCount).map((groupId, i) => (
               <GroupListItem
                 key={`group-panel-item-${groupId}`}
                 id={groupId}

app/javascript/gabsocial/components/panel/lists_panel.js

@@ -24,10 +24,13 @@ export default
 @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
 class ListsPanel extends ImmutablePureComponent {
+
   static propTypes = {
     onFetchLists: PropTypes.func.isRequired,
     lists: ImmutablePropTypes.list,
     intl: PropTypes.object.isRequired,
+    isLazy: PropTypes.bool,
+    shouldLoad: PropTypes.bool,
   }
 
   state = {
@@ -36,21 +39,40 @@ class ListsPanel extends ImmutablePureComponent {
 
   updateOnProps = [
     'lists',
+    'isLazy',
+    'shouldLoad',
   ]
 
-  componentDidMount(prevProps, prevState, snapshot) {
-    this.props.onFetchLists()
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.shouldLoad && !prevState.fetched) {
+      return { fetched: true }
+    }
+
+    return null
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevState.fetched && this.state.fetched) {
+      this.props.onFetchLists()
+    }
+  }
+
+  componentDidMount() {
+    if (!this.props.isLazy) {
+      this.props.onFetchLists()
+      this.setState({ fetched: true })
+    }
   }
 
   render() {
     const { intl, lists } = this.props
-    const count = lists.count()
+    const { fetched } = this.state
 
-    if (count === 0) return null
+    const count = !!lists ? lists.count() : 0
 
     const maxCount = 6
 
-    const listItems = lists.slice(0, maxCount).map((list) => ({
+    const listItems = !!lists && lists.slice(0, maxCount).map((list) => ({
       to: `/lists/${list.get('id')}`,
       title: list.get('title'),
     }))
@@ -65,9 +87,14 @@ class ListsPanel extends ImmutablePureComponent {
         noPadding
       >
         <div className={[_s.default, _s.boxShadowNone].join(' ')}>
-          <List scrollKey='lists_sidebar_panel' items={listItems} />
+          <List
+            scrollKey='lists_sidebar_panel'
+            items={listItems}
+            showLoading={!fetched}
+          />
         </div>
       </PanelLayout>
     )
   }
+
 }

app/javascript/gabsocial/components/panel/who_to_follow_panel.js

@@ -30,14 +30,37 @@ class WhoToFollowPanel extends ImmutablePureComponent {
     fetchSuggestions: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     suggestions: ImmutablePropTypes.list.isRequired,
+    isLazy: PropTypes.bool,
+  }
+
+  state = {
+    fetched: !this.props.isLazy,
   }
 
   updateOnProps = [
     'suggestions',
+    'isLazy',
+    'shouldLoad',
   ]
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.shouldLoad && !prevState.fetched) {
+      return { fetched: true }
+    }
+
+    return null
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevState.fetched && this.state.fetched) {
+      this.props.fetchSuggestions()
+    }
+  }
+
   componentDidMount() {
-    this.props.fetchSuggestions()
+    if (!this.props.isLazy) {
+      this.props.fetchSuggestions()
+    }
   }
 
   render() {

app/javascript/gabsocial/pages/home_page.js

@@ -1,10 +1,9 @@
 import { Fragment } from 'react'
+import throttle from 'lodash.throttle'
 import { openModal } from '../actions/modal'
 import { defineMessages, injectIntl } from 'react-intl'
 import { MODAL_HOME_TIMELINE_SETTINGS } from '../constants'
 import { me } from '../initial_state'
-// import IntersectionObserverArticle from '../components/intersection_observer_article'
-// import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'
 import PageTitle from '../features/ui/util/page_title'
 import GroupsPanel from '../components/panel/groups_panel'
 import ListsPanel from '../components/panel/lists_panel'
@@ -47,23 +46,37 @@ class HomePage extends PureComponent {
     isPro: PropTypes.bool,
   }
 
-  // intersectionObserverWrapper = new IntersectionObserverWrapper()
+  state = {
+    lazyLoaded: false,
+  }
 
-  // componentDidMount() {
-  //   this.attachIntersectionObserver()
-  // }
+  componentDidMount() {
+    this.window = window
+    this.documentElement = document.scrollingElement || document.documentElement
 
-  // componentWillUnmount() {
-  //   this.detachIntersectionObserver()
-  // }
+    this.window.addEventListener('scroll', this.handleScroll)
+  }
 
-  // attachIntersectionObserver() {
-  //   this.intersectionObserverWrapper.connect()
-  // }
+  componentWillUnmount() {
+    this.detachScrollListener()
+  }
 
-  // detachIntersectionObserver() {
-  //   this.intersectionObserverWrapper.disconnect()
-  // }
+  detachScrollListener = () => {
+    this.window.removeEventListener('scroll', this.handleScroll)
+  }
+
+  handleScroll = throttle(() => {
+    if (this.window) {
+      const { scrollTop } = this.documentElement
+      
+      if (scrollTop > 25 && !this.state.lazyLoaded) {
+        this.setState({ lazyLoaded: true })
+        this.detachScrollListener()
+      }
+    }
+  }, 150, {
+    trailing: true,
+  })
 
   render() {
     const {
@@ -73,6 +86,7 @@ class HomePage extends PureComponent {
       onOpenHomePageSettingsModal,
       isPro,
     } = this.props
+    const { lazyLoaded } = this.state
 
     return (
       <DefaultLayout
@@ -89,9 +103,9 @@ class HomePage extends PureComponent {
             <ProgressPanel />
             <ProPanel isPro={isPro} />
             <TrendsPanel />
-            <ListsPanel />
-            <WhoToFollowPanel />
-            <GroupsPanel />
+            <ListsPanel isLazy shouldLoad={lazyLoaded} />
+            <WhoToFollowPanel isLazy shouldLoad={lazyLoaded} />
+            <GroupsPanel isLazy shouldLoad={lazyLoaded} />
             <LinkFooter />
           </Fragment>
         )}