use skeleton for live view too

This commit is contained in:
Josh Hawkins 2024-02-25 16:46:01 -06:00
parent 1ecccaeb27
commit 83cba3242f
2 changed files with 4 additions and 3 deletions

View File

@ -1,7 +1,7 @@
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import useSWR from "swr"; import useSWR from "swr";
import ActivityIndicator from "../ui/activity-indicator"; import { Skeleton } from "../ui/skeleton";
type CameraImageProps = { type CameraImageProps = {
className?: string; className?: string;
@ -61,7 +61,7 @@ export default function CameraImage({
)} )}
{!hasLoaded && enabled ? ( {!hasLoaded && enabled ? (
<div className="absolute left-0 right-0 top-0 bottom-0 flex justify-center items-center"> <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> </div>
) : null} ) : null}
</div> </div>

View File

@ -12,6 +12,7 @@ import useCameraActivity from "@/hooks/use-camera-activity";
import { useRecordingsState } from "@/api/ws"; import { useRecordingsState } from "@/api/ws";
import { LivePlayerMode } from "@/types/live"; import { LivePlayerMode } from "@/types/live";
import useCameraLiveMode from "@/hooks/use-camera-live-mode"; import useCameraLiveMode from "@/hooks/use-camera-live-mode";
import { Skeleton } from "../ui/skeleton";
type LivePlayerProps = { type LivePlayerProps = {
className?: string; className?: string;
@ -119,7 +120,7 @@ export default function LivePlayer({
/> />
); );
} else { } else {
player = <ActivityIndicator />; player = <Skeleton className="w-full h-full rounded-2xl" />;
} }
return ( return (