Updated loading states and error states accross app

src/components/CameraOverview/SnapshotContainer.tsx

@@ -3,6 +3,8 @@ import type { ZoomInOptions } from "../../types/types";
 import NavigationArrow from "../UI/NavigationArrow";
 import { useCameraZoom } from "../../hooks/useCameraZoom";
 import { useEffect } from "react";
+import Loading from "../UI/Loading";
+import ErrorState from "../UI/ErrorState";
 
 type SnapshotContainerProps = {
   side: string;
@@ -42,13 +44,16 @@ export const SnapshotContainer = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [zoomLevel]);
 
-  if (isError) return <p className="h-100">An error occurred</p>;
-  if (isPending) return <p className="h-100">Loading...</p>;
-
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />
       <div className="w-full">
+        {isError && <ErrorState />}
+        {isPending && (
+          <div className="my-50 h-[50%]">
+            <Loading message="Camera Preview" />
+          </div>
+        )}
         <canvas
           onClick={handleZoomClick}
           ref={canvasRef}