improvement: only show uploading card when uploading a video (#996)

* Update Caps.tsx

* Update FolderVideosSection.tsx

Author: ameer2468

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

@@ -78,6 +78,7 @@ export const Caps = ({
 		setIsUploading,
 		setUploadingCapId,
 		setUploadProgress,
+		uploadingCapId,
 		setUploadingThumbnailUrl,
 	} = useUploadingContext();
 
@@ -321,27 +322,31 @@ export const Caps = ({
 						{isUploading && (
 							<UploadPlaceholderCard key={"upload-placeholder"} />
 						)}
-						{data.map((cap) => (
-							<CapCard
-								key={cap.id}
-								cap={cap}
-								analytics={analytics[cap.id] || 0}
-								onDelete={() => {
-									if (selectedCaps.length > 0) {
-										deleteCaps(selectedCaps);
-									} else {
-										deleteCap(cap.id);
-									}
-								}}
-								userId={user?.id}
-								customDomain={customDomain}
-								isLoadingAnalytics={isLoadingAnalytics}
-								domainVerified={domainVerified}
-								isSelected={selectedCaps.includes(cap.id)}
-								anyCapSelected={anyCapSelected}
-								onSelectToggle={() => handleCapSelection(cap.id)}
-							/>
-						))}
+						{data
+							.filter((cap) => !isUploading || cap.id !== uploadingCapId)
+							.map((cap) => {
+								return (
+									<CapCard
+										key={cap.id}
+										cap={cap}
+										analytics={analytics[cap.id] || 0}
+										onDelete={() => {
+											if (selectedCaps.length > 0) {
+												deleteCaps(selectedCaps);
+											} else {
+												deleteCap(cap.id);
+											}
+										}}
+										userId={user?.id}
+										customDomain={customDomain}
+										isLoadingAnalytics={isLoadingAnalytics}
+										domainVerified={domainVerified}
+										isSelected={selectedCaps.includes(cap.id)}
+										anyCapSelected={anyCapSelected}
+										onSelectToggle={() => handleCapSelection(cap.id)}
+									/>
+								);
+							})}
 					</div>
 				</>
 			)}

apps/web/app/(org)/dashboard/folder/[id]/components/FolderVideosSection.tsx

@@ -27,7 +27,7 @@ export default function FolderVideosSection({
 	cardType = "default",
 }: FolderVideosSectionProps) {
 	const router = useRouter();
-	const { isUploading } = useUploadingContext();
+	const { isUploading, uploadingCapId } = useUploadingContext();
 	const { activeOrganization, user } = useDashboardContext();
 
 	const [selectedCaps, setSelectedCaps] = useState<Video.VideoId[]>([]);
@@ -164,20 +164,22 @@ export default function FolderVideosSection({
 						{isUploading && (
 							<UploadPlaceholderCard key={"upload-placeholder"} />
 						)}
-						{initialVideos.map((video) => (
-							<CapCard
-								key={video.id}
-								cap={video}
-								analytics={analytics[video.id] || 0}
-								userId={user?.id}
-								isLoadingAnalytics={isLoadingAnalytics}
-								isSelected={selectedCaps.includes(video.id)}
-								anyCapSelected={selectedCaps.length > 0}
-								isDeleting={deleteCaps.isPending}
-								onSelectToggle={() => handleCapSelection(video.id)}
-								onDelete={() => deleteCaps.mutateAsync(selectedCaps)}
-							/>
-						))}
+						{initialVideos
+							.filter((cap) => !isUploading || cap.id !== uploadingCapId)
+							.map((video) => (
+								<CapCard
+									key={video.id}
+									cap={video}
+									analytics={analytics[video.id] || 0}
+									userId={user?.id}
+									isLoadingAnalytics={isLoadingAnalytics}
+									isSelected={selectedCaps.includes(video.id)}
+									anyCapSelected={selectedCaps.length > 0}
+									isDeleting={deleteCaps.isPending}
+									onSelectToggle={() => handleCapSelection(video.id)}
+									onDelete={() => deleteCaps.mutateAsync(selectedCaps)}
+								/>
+							))}
 					</>
 				)}
 			</div>