diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
index df08a2ea8..f1ab9472a 100644
--- a/web/src/components/camera/CameraImage.tsx
+++ b/web/src/components/camera/CameraImage.tsx
@@ -1,7 +1,7 @@
 import { useApiHost } from "@/api";
 import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
-import ActivityIndicator from "../ui/activity-indicator";
+import { Skeleton } from "../ui/skeleton";
 
 type CameraImageProps = {
   className?: string;
@@ -61,7 +61,7 @@ export default function CameraImage({
       )}
       {!hasLoaded && enabled ? (
         <div className="absolute left-0 right-0 top-0 bottom-0 flex justify-center items-center">
-          <ActivityIndicator />
+          <Skeleton className="w-full h-full rounded-2xl" />
         </div>
       ) : null}
     </div>
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 093410de0..4db365e42 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -12,6 +12,7 @@ import useCameraActivity from "@/hooks/use-camera-activity";
 import { useRecordingsState } from "@/api/ws";
 import { LivePlayerMode } from "@/types/live";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
+import { Skeleton } from "../ui/skeleton";
 
 type LivePlayerProps = {
   className?: string;
@@ -119,7 +120,7 @@ export default function LivePlayer({
       />
     );
   } else {
-    player = <ActivityIndicator />;
+    player = <Skeleton className="w-full h-full rounded-2xl" />;
   }
 
   return (