Updated loading states and error states accross app

src/components/SightingsWidget/SightingWidget.tsx

@@ -16,6 +16,7 @@ import popup from "../../assets/sounds/ui/popup_open.mp3";
 import { useSound } from "react-sounds";
 import { useNPEDContext } from "../../context/NPEDUserContext";
 import { useSoundContext } from "../../context/SoundContext";
+import Loading from "../UI/Loading";
 
 function useNow(tickMs = 1000) {
   const [, setNow] = useState(() => Date.now());
@@ -54,6 +55,7 @@ export default function SightingHistoryWidget({
     isSightingModalOpen,
     selectedSighting,
     mostRecent,
+    isLoading,
   } = useSightingFeedContext();
 
   const { dispatch } = useAlertHitContext();
@@ -64,6 +66,7 @@ export default function SightingHistoryWidget({
       if (!mostRecent) return;
       setSessionList([...sessionList, mostRecent]);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mostRecent, sessionStarted, setSessionList]);
 
   const hasAutoOpenedRef = useRef(false);
@@ -127,6 +130,11 @@ export default function SightingHistoryWidget({
       >
         <CardHeader title={title} />
         <div className="flex flex-col gap-3 ">
+          {isLoading && (
+            <div className="my-50 h-[50%]">
+              <Loading message="Loading Sightings" />
+            </div>
+          )}
           {/* Rows */}
           <div className="flex flex-col">
             {rows?.map((obj) => {