improve viewer pending states - #2157
Merged
Merged
Conversation
Contributor
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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. Comment |
cpvalente
force-pushed
the
claude/view-pages-empty-states-j6iupp
branch
2 times, most recently
from
August 1, 2026 13:01
94b88bb to
1854e36
Compare
cpvalente
changed the title
cpvalente
force-pushed
the
claude/view-pages-empty-states-j6iupp
branch
from
August 1, 2026 14:15
8a730d2 to
83ea76f
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refines viewer/editor “pending/empty/error” UI states by introducing a container-filling empty state component, enhancing error presentation via a new variant='error', and adjusting related layout/styling for better centering and viewport sizing.
Changes:
- Add an error-capable empty-state variant (
variant='error') and wire it throughEmptyPage. - Introduce
EmptyFillfor container-filling empty/loading states and adopt it in several views/panels. - Update SCSS/layout (notably
100dvh, centering, spacing, and image sizing) to improve visual consistency.
Reviewed changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/client/src/views/timer/Timer.tsx | Uses EmptyPage variant='error' for fetch errors. |
| apps/client/src/views/timeline/TimelinePage.tsx | Adds EmptyFill for “no data” and uses error variant for fetch failures. |
| apps/client/src/views/studio/Studio.tsx | Uses EmptyPage variant='error' for fetch errors. |
| apps/client/src/views/project-info/ProjectInfo.tsx | Uses error variant for fetch errors; minor cleanup in image conditional rendering. |
| apps/client/src/views/project-info/ProjectInfo.scss | Adjusts info image container sizing/centering and image fit behavior. |
| apps/client/src/views/cuesheet/CuesheetTableWrapper.tsx | Removes custom-field loading wrapper; always renders the table. |
| apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx | Switches loading/error UI to EmptyFill and adds translation access. |
| apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss | Adds a tableLoading class to place fill states in the grid. |
| apps/client/src/views/countdown/Countdown.tsx | Uses EmptyPage variant='error' for fetch errors; simplifies empty-state usage. |
| apps/client/src/views/countdown/Countdown.scss | Simplifies empty-state layout with gap and removes specialized overrides. |
| apps/client/src/views/common/loader/Loader.module.scss | Updates loader height to 100dvh and tweaks animation timing/duration. |
| apps/client/src/views/backstage/Backstage.tsx | Uses EmptyPage variant='error' for fetch errors. |
| apps/client/src/features/rundown/RundownList.tsx | Updates pending/error handling to use EmptyFill. |
| apps/client/src/features/rundown/rundown-table/RundownTable.tsx | Removes custom-field loading wrapper; always renders CuesheetTable. |
| apps/client/src/features/operator/Operator.tsx | Uses error variant for fetch errors; adds EmptyFill for empty-rundown state. |
| apps/client/src/common/components/state/EmptyTableBody.tsx | Consolidates table empty state into Empty text={...}. |
| apps/client/src/common/components/state/EmptyTableBody.module.scss | Removes now-unused text styling for the old span-based empty label. |
| apps/client/src/common/components/state/EmptyPage.tsx | Adds variant?: 'error' and forwards it to Empty. |
| apps/client/src/common/components/state/EmptyPage.module.scss | Uses 100dvh and centers content vertically; updates padding. |
| apps/client/src/common/components/state/EmptyFill.tsx | New: wrapper to fill parent containers with an Empty state. |
| apps/client/src/common/components/state/EmptyFill.module.scss | New: fill layout/styling for EmptyFill. |
| apps/client/src/common/components/state/Empty.tsx | Adds variant='error' behavior (alert role + warning icon). |
| apps/client/src/common/components/state/Empty.module.scss | Updates empty-state styling and introduces error-specific styling. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+6
to
+19
| interface EmptyFillProps { | ||
| text?: string; | ||
| /** placed on the fill wrapper — e.g. to assign a grid-area in a grid parent */ | ||
| className?: string; | ||
| } | ||
|
|
||
| /** Container-filling empty/loading state for panels and grid/flex cells. */ | ||
| export default function EmptyFill({ text, className }: EmptyFillProps) { | ||
| return ( | ||
| <div className={cx([style.fill, className])}> | ||
| <Empty text={text} /> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.