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

ameer2468 · 2025-09-09T11:42:20Z

Summary by CodeRabbit

Bug Fixes
- Improved upload experience: in-progress uploads are now excluded from caps and folder video lists while uploading, preventing temporary duplicates and reducing flicker.
- The UI consistently shows an upload placeholder during active uploads and keeps layout stable until uploads complete.

coderabbitai · 2025-09-09T11:42:27Z

Walkthrough

Components now read uploadingCapId from useUploadingContext() and, when isUploading is true, filter lists to hide the cap whose id matches uploadingCapId. The uploading context’s public return type was expanded to include uploadingCapId.

Changes

Cohort / File(s)	Summary of Changes
Dashboard Caps UI `apps/web/app/(org)/dashboard/caps/Caps.tsx`	Destructure `uploadingCapId` from `useUploadingContext()`. When `isUploading` is true, filter out the cap whose `id` equals `uploadingCapId` before mapping; rendering loop adjusted accordingly.
Folder Videos Section `apps/web/app/(org)/dashboard/folder/[id]/components/FolderVideosSection.tsx`	Destructure `uploadingCapId` from `useUploadingContext()` and filter `initialVideos` to exclude the video with `id === uploadingCapId` when `isUploading` is true. `UploadPlaceholderCard` display remains gated by `isUploading`.
Uploading Context API `apps/web/app/(org)/caps/UploadingContext.ts`	Public return type of `useUploadingContext()` expanded to `{ isUploading: boolean; uploadingCapId?: Video.VideoId }`, exposing the id of the cap currently uploading.

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant UI as Caps / FolderVideosSection
  participant UC as UploadingContext
  participant Data as Caps Data

  User->>UI: Open view
  UI->>UC: useUploadingContext()
  UC-->>UI: { isUploading, uploadingCapId }
  UI->>Data: fetch caps/videos list
  Data-->>UI: [items...]
  alt isUploading == true
    UI->>UI: filter out item with id == uploadingCapId
    note right of UI #DDEBF7: Uploading item hidden from grid\nUploadPlaceholderCard shown separately
  end
  UI-->>User: Render grid (without uploading item)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I hop and I hide a cap mid-flight,
Soft paws buffer the grid from sight.
A placeholder waits while I nibble a name,
Then pop! back it comes — the upload’s a game.
Carrots cheer: the UI stays bright. 🥕

Pre-merge checks (1 passed, 2 warnings)

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	There is no pull request description provided, leaving reviewers without context on the specific changes and their purpose.	Add a descriptive PR description that outlines the changes made, their rationale, and any relevant implementation details to help reviewers understand the intent.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly captures the main change—filtering out existing cap cards so only the uploading placeholder displays during uploads—while using clear language and conventional commit style.

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch filter-out-cap-card-while-uploading

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

76-83: Enforce Video.VideoId type on uploadingCapId in UploadingContext

In apps/web/app/(org)/dashboard/caps/UploadingContext.tsx, change

uploadingCapId: string | null → uploadingCapId: Video.VideoId | null

setUploadingCapId: (id: string | null) => void → setUploadingCapId: (id: Video.VideoId | null) => void

Then verify all callers (e.g., comparisons to cap.id, calls to setUploadingCapId(null)) conform to the new type.

🧹 Nitpick comments (1)

apps/web/app/(org)/dashboard/caps/Caps.tsx (1)
334-347: Avoid “phantom” selections when the uploading cap is hidden.

If a user had selected the cap before upload begins, it stays in selectedCaps but is now hidden, which can confuse the SelectedCapsBar and bulk-delete. Consider auto-deselecting the uploading cap while it’s uploading.

Add this effect near the other effects:
useEffect(() => {
  if (isUploading && uploadingCapId) {
    setSelectedCaps((prev) => prev.filter((id) => id !== uploadingCapId));
  }
}, [isUploading, uploadingCapId]);

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3b0eb5b and 611de15.

📒 Files selected for processing (1)

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

🧰 Additional context used

📓 Path-based instructions (4)

apps/web/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/web/**/*.{ts,tsx}: Use TanStack Query v5 for client-side server state and data fetching in the web app
Mutations should call Server Actions and perform precise cache updates with setQueryData/setQueriesData, avoiding broad invalidations
Prefer Server Components for initial data and pass initialData to client components for React Query hydration

Files:

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

{apps/web,packages/ui}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

{apps/web,packages/ui}/**/*.{ts,tsx}: Use Tailwind CSS exclusively for styling in the web app and shared React UI components
Component naming: React components in PascalCase; hooks in camelCase starting with 'use'

Files:

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

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use strict TypeScript and avoid any; prefer shared types from packages

**/*.{ts,tsx}: Use Biome to format/lint TypeScript with a 2-space indent
TypeScript file names should be kebab-case (e.g., user-menu.tsx)

Files:

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

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

React/Solid components should be named using PascalCase

Files:

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

🧬 Code graph analysis (1)

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

apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx (1)

CapCard (80-475)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: Build Desktop (x86_64-pc-windows-msvc, windows-latest)
GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
GitHub Check: Analyze (rust)

🔇 Additional comments (1)

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

325-327: LGTM: correct, minimal filter to hide the uploading cap.

The predicate !isUploading || cap.id !== uploadingCapId is precise and safe when uploadingCapId is null.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

apps/web/app/(org)/dashboard/folder/[id]/components/FolderVideosSection.tsx (2)
167-169: Make the filter intent explicit and avoid recomputation

Readability: the predicate is easier to parse as “hide when uploading AND ids match.” Also, memoize the filtered list to avoid filtering on every render.

Apply this diff in the render block:
-            {initialVideos
-              .filter((cap) => !isUploading || cap.id !== uploadingCapId)
-              .map((video) => (
+            {visibleVideos.map((video) => (
Then add this near the top of the component (e.g., after Line 149, before return):
const visibleVideos = useMemo(
  () =>
    isUploading && uploadingCapId
      ? initialVideos.filter((video) => video.id !== uploadingCapId)
      : initialVideos,
  [initialVideos, isUploading, uploadingCapId],
);
Note: If multi-upload is planned later, switch uploadingCapId to a Set and filter with a has() check.

1-1: File naming: prefer kebab-case for .tsx files

To match the repo guideline, consider renaming to folder-videos-section.tsx.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 611de15 and 949888e.

📒 Files selected for processing (1)

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

🧰 Additional context used

📓 Path-based instructions (4)

apps/web/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/web/**/*.{ts,tsx}: Use TanStack Query v5 for client-side server state and data fetching in the web app
Mutations should call Server Actions and perform precise cache updates with setQueryData/setQueriesData, avoiding broad invalidations
Prefer Server Components for initial data and pass initialData to client components for React Query hydration

Files:

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

{apps/web,packages/ui}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

{apps/web,packages/ui}/**/*.{ts,tsx}: Use Tailwind CSS exclusively for styling in the web app and shared React UI components
Component naming: React components in PascalCase; hooks in camelCase starting with 'use'

Files:

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

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use strict TypeScript and avoid any; prefer shared types from packages

**/*.{ts,tsx}: Use Biome to format/lint TypeScript with a 2-space indent
TypeScript file names should be kebab-case (e.g., user-menu.tsx)

Files:

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

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

React/Solid components should be named using PascalCase

Files:

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

🧬 Code graph analysis (1)

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

apps/web/app/(org)/dashboard/caps/UploadingContext.tsx (1)

useUploadingContext (21-29)

apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx (1)

CapCard (80-475)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
GitHub Check: Build Desktop (x86_64-pc-windows-msvc, windows-latest)
GitHub Check: Analyze (rust)

🔇 Additional comments (2)

apps/web/app/(org)/dashboard/folder/[id]/components/FolderVideosSection.tsx (2)
30-30: LGTM: Correctly pulling uploadingCapId from context

This aligns with the PR goal and keeps the component’s state minimal.

170-181: Confirm delete semantics for single-card Delete

Clicking Delete on one card currently deletes all selected caps (selectedCaps). If this is intentional (card Delete acts as “bulk delete”), ignore. If not, consider scoping to the card:
-                  onDelete={() => deleteCaps.mutateAsync(selectedCaps)}
+                  onDelete={() => deleteCaps.mutateAsync([video.id])}

Update Caps.tsx

611de15

vercel bot deployed to Preview September 9, 2025 11:43 View deployment

coderabbitai bot reviewed Sep 9, 2025

View reviewed changes

Update FolderVideosSection.tsx

949888e

vercel bot deployed to Preview September 9, 2025 12:52 View deployment

coderabbitai bot reviewed Sep 9, 2025

View reviewed changes

ameer2468 merged commit 9cdfc7e into main Sep 9, 2025
15 checks passed

ameer2468 deleted the filter-out-cap-card-while-uploading branch September 9, 2025 12:56

coderabbitai bot mentioned this pull request Sep 10, 2025

fixes: Fix deleting caps within folders and duplicate refresh route #997

Merged

This was referenced Sep 21, 2025

Remove progress for legacy clients #1035

Merged

Abstract upload flow #1048

Merged

Improve uploading context #1051

Merged

improvement: only video owners will be able to perform additional actions #1068

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

ameer2468 commented Sep 9, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Sep 9, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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

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

Uh oh!

Conversation

ameer2468 commented Sep 9, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Pre-merge checks (1 passed, 2 warnings)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ameer2468 commented Sep 9, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Sep 9, 2025 •

edited

Loading