diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
index f1ab9472a..df08a2ea8 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 { Skeleton } from "../ui/skeleton";
+import ActivityIndicator from "../ui/activity-indicator";
 
 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">
-          <Skeleton className="w-full h-full rounded-2xl" />
+          <ActivityIndicator />
         </div>
       ) : null}
     </div>
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 4db365e42..093410de0 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -12,7 +12,6 @@ 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;
@@ -120,7 +119,7 @@ export default function LivePlayer({
       />
     );
   } else {
-    player = <Skeleton className="w-full h-full rounded-2xl" />;
+    player = <ActivityIndicator />;
   }
 
   return (