Updated loading states and error states accross app

src/components/SightingOverview/SightingOverview.tsx

@@ -5,6 +5,7 @@ import { useSightingFeedContext } from "../../context/SightingFeedContext";
 import { useHiDPICanvas } from "../../hooks/useHiDPICanvas";
 import NavigationArrow from "../UI/NavigationArrow";
 import NumberPlate from "../PlateStack/NumberPlate";
+import Loading from "../UI/Loading";
 
 const SightingOverview = () => {
   const [overlayMode, setOverlayMode] = useState<0 | 1 | 2>(0);
@@ -22,18 +23,11 @@ const SightingOverview = () => {
 
   const { sync } = useHiDPICanvas(imgRef, canvasRef);
 
-  if (!mostRecent)
-    return (
-      <div className="h-150 flex items-center justify-center text-3xl animate-pulse">
-        <NavigationArrow side={side} />
-        <p>No Recent Sightings</p>
-      </div>
-    );
   if (isLoading)
     return (
-      <div className="h-150 flex items-center justify-center text-3xl animate-pulse">
+      <div className="h-150 flex items-center justify-center">
         <NavigationArrow side={side} />
-        <p>Loading</p>
+        <Loading message="Loading" />
       </div>
     );
 
@@ -42,6 +36,14 @@ const SightingOverview = () => {
     An error occurred. Cannot display footage.
   </div>;
 
+  if (!mostRecent)
+    return (
+      <div className="h-150 flex items-center justify-center text-3xl animate-pulse">
+        <NavigationArrow side={side} />
+        <Loading message="No Recent Sightings" />
+      </div>
+    );
+
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} />