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/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() {