perf(web): resolve dashboard thumbnail URLs during the page render

apps/web/app/(org)/dashboard/caps/Caps.tsx

@@ -12,6 +12,10 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { ChromeRecorderButton } from "@/components/ChromeRecorderButton";
+import {
+	type SeededThumbnails,
+	SeededThumbnailsProvider,
+} from "@/components/VideoThumbnail";
 import { CHROME_EXTENSION_BUTTON_CLASS } from "@/lib/chrome-extension";
 import { useEffectMutation, useRpcClient } from "@/lib/EffectRuntime";
 import { useVideosAnalyticsQuery } from "@/lib/Queries/Analytics";
@@ -70,11 +74,13 @@ export const Caps = ({
 	count,
 	analyticsEnabled,
 	folders,
+	thumbnails,
 }: {
 	data: VideoData;
 	count: number;
 	folders: FolderDataType[];
 	analyticsEnabled: boolean;
+	thumbnails?: SeededThumbnails;
 }) => {
 	const router = useRouter();
 	const params = useSearchParams();
@@ -286,36 +292,38 @@ export const Caps = ({
 						</h1>
 					</div>
 
-					<div className="grid grid-cols-1 gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
-						{isUploading && (
-							<UploadPlaceholderCard key={"upload-placeholder"} />
-						)}
-						{visibleVideos.map((video) => {
-							const videoAnalytics = analytics[video.id];
-							return (
-								<CapCard
-									key={video.id}
-									cap={video}
-									analytics={videoAnalytics ?? 0}
-									onDelete={() => {
-										if (selectedCaps.length > 0) {
-											deleteCaps(selectedCaps);
-										} else {
-											deleteCap(video.id);
-										}
-									}}
-									userId={user?.id}
-									isLoadingAnalytics={isLoadingAnalytics}
-									isSelected={selectedCaps.includes(video.id)}
-									anyCapSelected={anyCapSelected}
-									onSelectToggle={() => handleCapSelection(video.id)}
-									canMove
-									moveLocation={moveLocation}
-									moveRootLabel="My Caps"
-								/>
-							);
-						})}
-					</div>
+					<SeededThumbnailsProvider value={thumbnails}>
+						<div className="grid grid-cols-1 gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+							{isUploading && (
+								<UploadPlaceholderCard key={"upload-placeholder"} />
+							)}
+							{visibleVideos.map((video) => {
+								const videoAnalytics = analytics[video.id];
+								return (
+									<CapCard
+										key={video.id}
+										cap={video}
+										analytics={videoAnalytics ?? 0}
+										onDelete={() => {
+											if (selectedCaps.length > 0) {
+												deleteCaps(selectedCaps);
+											} else {
+												deleteCap(video.id);
+											}
+										}}
+										userId={user?.id}
+										isLoadingAnalytics={isLoadingAnalytics}
+										isSelected={selectedCaps.includes(video.id)}
+										anyCapSelected={anyCapSelected}
+										onSelectToggle={() => handleCapSelection(video.id)}
+										canMove
+										moveLocation={moveLocation}
+										moveRootLabel="My Caps"
+									/>
+								);
+							})}
+						</div>
+					</SeededThumbnailsProvider>
 				</>
 			)}
 			{(data.length > limit || data.length === limit || page !== 1) && (

apps/web/app/(org)/dashboard/caps/page.tsx

@@ -22,6 +22,7 @@ import { and, count, desc, eq, inArray, isNull, sql } from "drizzle-orm";
 import { type Array, Effect } from "effect";
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
+import { seedThumbnailUrls } from "@/lib/seeded-thumbnails";
 import { runPromise } from "@/lib/server";
 import { Caps } from "./Caps";
 
@@ -272,6 +273,12 @@ export default async function CapsPage(props: PageProps<"/dashboard/caps">) {
 	const organizationSettings = organizationSettingsRow?.settings ?? null;
 
 	const videoIds = videoData.map((video) => video.id);
+	const thumbnails = seedThumbnailUrls(
+		user,
+		videoData
+			.filter((video) => !video.hasActiveUpload)
+			.map((video) => Video.VideoId.make(video.id)),
+	);
 	const sharedSpacesMap =
 		await getSharedSpacesForVideos(videoIds).pipe(runPromise);
 
@@ -340,6 +347,7 @@ export default async function CapsPage(props: PageProps<"/dashboard/caps">) {
 			data={processedVideoData}
 			folders={foldersData}
 			count={totalCount}
+			thumbnails={thumbnails}
 			analyticsEnabled={Boolean(
 				serverEnv().TINYBIRD_TOKEN && serverEnv().TINYBIRD_HOST,
 			)}

apps/web/app/(org)/dashboard/spaces/[spaceId]/SharedCaps.tsx

@@ -19,6 +19,10 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
+import {
+	type SeededThumbnails,
+	SeededThumbnailsProvider,
+} from "@/components/VideoThumbnail";
 import {
 	canManageOrganizationMembers,
 	canManageSpace,
@@ -99,6 +103,7 @@ export const SharedCaps = ({
 	folders,
 	analyticsEnabled,
 	organizationData,
+	thumbnails,
 }: {
 	data: SharedVideoData;
 	count: number;
@@ -115,6 +120,7 @@ export const SharedCaps = ({
 		name: string;
 		ownerId: User.UserId;
 	};
+	thumbnails?: SeededThumbnails;
 }) => {
 	const params = useSearchParams();
 	const pathname = usePathname();
@@ -434,39 +440,44 @@ export const SharedCaps = ({
 					<h1 className="mb-4 text-2xl font-medium text-gray-12">
 						Videos and screenshots
 					</h1>
-					<div className="grid grid-cols-1 gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
-						{data.map((cap) => {
-							return (
-								<SharedCapCard
-									key={cap.id}
-									cap={cap}
-									hideSharedStatus
-									isLoadingAnalytics={analyticsQuery.isLoading}
-									analytics={analytics[cap.id] || 0}
-									organizationName={activeOrganization?.organization.name || ""}
-									spaceName={spaceData?.name || ""}
-									userId={currentUserId}
-									canMove={canManageCurrentSharedCollection}
-									moveLocation={moveLocation}
-									moveRootLabel={moveRootLabel}
-									isSelected={
-										canManageCurrentSharedCollection &&
-										selectedCaps.includes(cap.id)
-									}
-									anyCapSelected={
-										canManageCurrentSharedCollection && selectedCaps.length > 0
-									}
-									onSelectToggle={
-										canManageCurrentSharedCollection
-											? () => handleCapSelection(cap.id)
-											: undefined
-									}
-									onDragStart={() => setIsDraggingCap(true)}
-									onDragEnd={() => setIsDraggingCap(false)}
-								/>
-							);
-						})}
-					</div>
+					<SeededThumbnailsProvider value={thumbnails}>
+						<div className="grid grid-cols-1 gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+							{data.map((cap) => {
+								return (
+									<SharedCapCard
+										key={cap.id}
+										cap={cap}
+										hideSharedStatus
+										isLoadingAnalytics={analyticsQuery.isLoading}
+										analytics={analytics[cap.id] || 0}
+										organizationName={
+											activeOrganization?.organization.name || ""
+										}
+										spaceName={spaceData?.name || ""}
+										userId={currentUserId}
+										canMove={canManageCurrentSharedCollection}
+										moveLocation={moveLocation}
+										moveRootLabel={moveRootLabel}
+										isSelected={
+											canManageCurrentSharedCollection &&
+											selectedCaps.includes(cap.id)
+										}
+										anyCapSelected={
+											canManageCurrentSharedCollection &&
+											selectedCaps.length > 0
+										}
+										onSelectToggle={
+											canManageCurrentSharedCollection
+												? () => handleCapSelection(cap.id)
+												: undefined
+										}
+										onDragStart={() => setIsDraggingCap(true)}
+										onDragEnd={() => setIsDraggingCap(false)}
+									/>
+								);
+							})}
+						</div>
+					</SeededThumbnailsProvider>
 					{(data.length > limit || data.length === limit || page !== 1) && (
 						<div className="mt-4">
 							<CapPagination

apps/web/app/(org)/dashboard/spaces/[spaceId]/page.tsx

@@ -32,6 +32,7 @@ import { and, count, desc, eq, inArray, isNull, or, sql } from "drizzle-orm";
 import { Effect } from "effect";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { seedThumbnailUrls } from "@/lib/seeded-thumbnails";
 import { runPromise } from "@/lib/server";
 import { SharedCaps } from "./SharedCaps";
 
@@ -388,6 +389,12 @@ export default async function SharedCapsPage(props: {
 			fetchSpaceVideos(space.id, page, limit),
 			fetchOrganizationSettings(space.organizationId),
 		]);
+		const thumbnails = seedThumbnailUrls(
+			user,
+			spaceVideoData
+				.filter((video) => !video.hasActiveUpload)
+				.map((video) => Video.VideoId.make(video.id)),
+		);
 		const resolvedSpace = await Effect.gen(function* () {
 			const imageUploads = yield* ImageUploads;
 			return {
@@ -439,6 +446,7 @@ export default async function SharedCapsPage(props: {
 				organizationMembers={organizationMembersData}
 				currentUserId={user.id}
 				folders={foldersData}
+				thumbnails={thumbnails}
 			/>
 		);
 	}
@@ -529,6 +537,12 @@ export default async function SharedCapsPage(props: {
 			fetchFolders(organization.id, true),
 			fetchOrganizationSettings(organization.id),
 		]);
+		const thumbnails = seedThumbnailUrls(
+			user,
+			orgVideoData
+				.filter((video) => !video.hasActiveUpload)
+				.map((video) => Video.VideoId.make(video.id)),
+		);
 		const sharedSpacesMap = await fetchSharedSpacesForVideos(
 			orgVideoData.map((video) => Video.VideoId.make(video.id)),
 			{ userId: user.id, organizationId: organization.id },
@@ -571,6 +585,7 @@ export default async function SharedCapsPage(props: {
 				organizationMembers={organizationMembersData}
 				currentUserId={user.id}
 				folders={foldersData}
+				thumbnails={thumbnails}
 			/>
 		);
 	}