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}