be more aggressive with loading videos

Author: BetrixDev

app/components/dialogs/upload-video-dialog.tsx

@@ -28,6 +28,7 @@ import { Progress } from "../ui/progress";
 import { FFmpeg } from "@ffmpeg/ffmpeg";
 import { fetchFile, toBlobURL } from "@ffmpeg/util";
 import { RangeSlider } from "../ui/range-slider";
+import { toast } from "sonner";
 
 type FormData = {
   title: string | null;

app/components/video-card.tsx

@@ -36,6 +36,12 @@ import { motion } from "framer-motion";
 dayjs.extend(utc);
 dayjs.extend(relativeTime);
 
+export function VideoCardSkeleton() {
+  return (
+    <Skeleton className="relative group/video aspect-video max-w-2xl rounded-lg overflow-hidden border shadow-lg" />
+  );
+}
+
 type VideoCardProps = {
   title: string;
   views: number;

app/lib/query-utils.ts

@@ -80,7 +80,17 @@ const fetchVideosData = createServerFn({ method: "GET" })
 export const videosQueryOptions = queryOptions({
   queryKey: queryKeys.videos,
   queryFn: () => fetchVideosData(),
-  staleTime: 1000 * 60 * 5,
+  staleTime: ({ state }) => {
+    if (
+      state?.data &&
+      "signedIn" in state.data &&
+      state.data?.signedIn === false
+    ) {
+      return 0;
+    }
+
+    return 1000 * 60 * 5;
+  },
 });
 
 export type VideoData = {

app/routes/videos.tsx

@@ -14,34 +14,19 @@ import { UploadButton } from "../components/upload-button";
 import { UploadingVideosContainer } from "../components/uploading-videos-container";
 import { VideosBoard } from "../components/videos-board";
 import { useQuery } from "@tanstack/react-query";
-import { fetchClerkAuth } from "@/server-fns/clerk";
 import { seo } from "@/lib/seo";
 import { HeroHighlight } from "@/components/ui/hero-highlight";
 import { Separator } from "@/components/ui/seperator";
 import { Footer } from "@/components/footer";
 import { useEffect } from "react";
 import { HumanFileSizeMotion } from "@/components/human-file-size-motion";
 import { humanFileSize } from "@/lib/utils";
+import { useUser } from "@clerk/tanstack-start";
+import { VideoCardSkeleton } from "@/components/video-card";
 
 export const Route = createFileRoute("/videos")({
   component: RouteComponent,
-  beforeLoad: async () => {
-    const { userId } = await fetchClerkAuth();
-
-    if (!userId) {
-      throw redirect({ to: "/sign-in/$" });
-    }
-
-    return {
-      userId,
-    };
-  },
   pendingMs: 0,
-  loader: ({ context }) => {
-    return {
-      userId: context.userId,
-    };
-  },
   head: () => ({
     meta: seo({
       title: "Your Videos",
@@ -52,12 +37,44 @@ export const Route = createFileRoute("/videos")({
 });
 
 function RouteComponent() {
-  const { userId } = Route.useLoaderData();
-  const { data: videoData } = useQuery(videosQueryOptions);
+  const navigate = Route.useNavigate();
+  const { user } = useUser();
+  const { data: videoData, isLoading } = useQuery({
+    ...videosQueryOptions,
+    queryFn: async () => {
+      try {
+        // @ts-expect-error
+        const data = await videosQueryOptions.queryFn!();
+
+        return data;
+      } catch (error) {
+        if (
+          typeof error === "object" &&
+          error !== null &&
+          "isRedirect" in error &&
+          error.isRedirect &&
+          "to" in error &&
+          typeof error.to === "string"
+        ) {
+          // @ts-expect-error
+          navigate(error);
+
+          return {
+            videos: [],
+            signedIn: false,
+          };
+        }
+
+        return {
+          videos: [],
+        };
+      }
+    },
+  });
   const { data: usageData } = useQuery(usageDataQueryOptions);
 
   useEffect(() => {
-    if (!videoData) {
+    if (!videoData || !user?.id) {
       return;
     }
 
@@ -68,13 +85,13 @@ function RouteComponent() {
           isPrivate: video.isPrivate,
           videoLengthSeconds: video.videoLengthSeconds,
           views: video.views,
-          authorId: userId,
+          authorId: user.id,
           isProcessing: video.status === "processing",
           videoCreatedAt: video.createdAt.toString(),
         },
       });
     });
-  }, [videoData, userId]);
+  }, [videoData, user]);
 
   return (
     <HeroHighlight className="min-h-screen flex flex-col">
@@ -106,7 +123,15 @@ function RouteComponent() {
         <div className="container flex flex-col gap-6">
           <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             <UploadingVideosContainer />
-            {videoData && <VideosBoard videos={videoData.videos} />}
+            {isLoading ? (
+              <>
+                <VideoCardSkeleton />
+                <VideoCardSkeleton />
+                <VideoCardSkeleton />
+              </>
+            ) : (
+              videoData && <VideosBoard videos={videoData.videos} />
+            )}
           </div>
         </div>
       </main>