Fix Loading State in Newsfeed

components/Newsfeed/Newsfeed.tsx

@@ -1,7 +1,7 @@
 import ErrorPage from "next/error"
 import { Timestamp } from "firebase/firestore"
 import { useTranslation } from "next-i18next"
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { Frequency, useAuth } from "../auth"
 import { Col, Row, Spinner } from "../bootstrap"
 import { Profile, useProfile, usePublicProfile } from "../db"
@@ -30,17 +30,15 @@ export default function Newsfeed() {
   const [isShowingBills, setIsShowingBills] = useState<boolean>(true)
 
   const [allResults, setAllResults] = useState<Notifications>([])
-  const [filteredResults, setFilteredResults] = useState<Notifications>([])
+  const [notificationsLoading, setNotificationsLoading] = useState(true)
 
-  useEffect(() => {
-    const results = allResults.filter(result => {
-      if (isShowingOrgs && result.type == `testimony`) return true
-      if (isShowingBills && result.type == `bill`) return true
+  const filteredResults = useMemo(() => {
+    return allResults.filter(result => {
+      if (isShowingOrgs && result.type === "testimony") return true
+      if (isShowingBills && result.type === "bill") return true
       return false
     })
-
-    setFilteredResults(results)
-  }, [isShowingOrgs, isShowingBills, allResults])
+  }, [allResults, isShowingOrgs, isShowingBills])
 
   const onOrgFilterChange = (isShowing: boolean) => {
     setIsShowingOrgs(isShowing)
@@ -56,12 +54,14 @@ export default function Newsfeed() {
         if (uid) {
           const notifications = await notificationQuery(uid)
           setAllResults(notifications)
-          setFilteredResults(notifications)
         }
       } catch (error) {
         console.error("Error fetching notifications: " + error)
+      } finally {
+        setNotificationsLoading(false)
       }
     }
+    setNotificationsLoading(true)
     fetchNotifications()
   }, [uid])
 
@@ -190,7 +190,7 @@ export default function Newsfeed() {
 
   return (
     <>
-      {result.loading && uid ? (
+      {(uid && result.loading) || notificationsLoading ? (
         <Row>
           <Spinner animation="border" className="mx-auto" />
         </Row>