From 29a7573f5c9f02857b6fe9f9ce408c38671b0df2 Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Sat, 17 Oct 2026 22:16:19 +0100
Subject: [PATCH] fix(frontend): clips & vod pages briefly showing "No Clips"
 on load (#56)

Resolves #42

Reviewed-on: https://gitea.defaoite.dev/dylan/vod-system/pulls/56
---
 frontend/src/pages/MyClips.tsx | 6 ++++--
 frontend/src/pages/MyVods.tsx  | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/MyClips.tsx b/frontend/src/pages/MyClips.tsx
index 9f2ed4c..9abede9 100644
--- a/frontend/src/pages/MyClips.tsx
+++ b/frontend/src/pages/MyClips.tsx
@@ -7,12 +7,14 @@ import type { Clip } from "../utils/types";
 const MyClips = () => {
     const [clips, setClips] = useState<Clip[]>([]);
     const [error, setError] = useState<null | string>(null);
+    const [loading, setLoading] = useState(true);
     const navigate = useNavigate();
 
     useEffect(() => {
         getClips()
             .then((data) => setClips(data.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())))
-            .catch((err) => setError(err));
+            .catch((err) => setError(err))
+            .finally(() => setLoading(false));
     }, []);
 
     const handleDelete = async (id: number) => {
@@ -42,7 +44,7 @@ const MyClips = () => {
                 ))}
             </div>
 
-            {clips.length === 0 && !error && (
+            {clips.length === 0 && !error && !loading && (
                 <div className="flex flex-col items-center justify-center py-16 text-muted">
                     <p className="text-base">No clips yet.</p>
                     <p className="text-sm mt-1">Upload your first clip to get started.</p>
diff --git a/frontend/src/pages/MyVods.tsx b/frontend/src/pages/MyVods.tsx
index bd5a425..5783923 100644
--- a/frontend/src/pages/MyVods.tsx
+++ b/frontend/src/pages/MyVods.tsx
@@ -7,12 +7,14 @@ import type { Vod } from "../utils/types";
 const MyVods = () => {
     const [vods, setVods] = useState<Vod[]>([]);
     const [error, setError] = useState<null | string>(null);
+    const [loading, setLoading] = useState(true);
     const navigate = useNavigate();
 
     useEffect(() => {
         getVods()
             .then((data) => setVods(data.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())))
-            .catch((err) => setError(err instanceof Error ? err.message : "Failed to load vods"));
+            .catch((err) => setError(err instanceof Error ? err.message : "Failed to load vods"))
+            .finally(() => setLoading(false));
     }, []);
 
     const handleDelete = async (id: number) => {
@@ -45,7 +47,7 @@ const MyVods = () => {
                 ))}
             </div>
 
-            {vods.length === 0 && !error && (
+            {vods.length === 0 && !error && !loading && (
                 <div className="flex flex-col items-center justify-center py-16 text-muted">
                     <p className="text-base">No VoDs yet.</p>
                     <p className="text-sm mt-1">Your stream recordings will appear here.</p>