fix(media-library): surface parse error in VideoPreview instead of infinite loading#12155
Draft
fix(media-library): surface parse error in VideoPreview instead of infinite loading#12155
Conversation
…finite loading
When getMediaLibraryId() throws (e.g. library ID doesn't start with 'ml'),
the catch block returned null, causing useVideoPlaybackInfo(null) to return
an empty state — not loading, not error, no result. The render logic then
fell through to <VideoSkeleton /> with no error, showing an infinite
loading skeleton.
Fix: return the parse error from the useMemo as a tuple [params, error]
and render <VideoSkeleton error={parseError} /> when it's present. This
shows the critical tone skeleton immediately instead of loading forever.
- Export getMediaLibraryId for direct unit testing
- Add 6 unit tests for getMediaLibraryId parse logic
Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
3 Skipped Deployments
|
Contributor
🧪 E2E Preview environment🔑 Environment Variables for Local TestingThis is the preview URL for the E2E tests: https://e2e-studio-h6v7qgta9.sanity.dev To run the E2E tests locally, you can use the following environment variables, then run 💬 Remember to build the project first with |
Contributor
📊 Playwright Test ReportThis report contains test results, including videos of failing tests. |
Contributor
📚 TypeDoc Generation Result✅ TypeDoc generated successfully!
The TypeDoc JSON file has been generated and validated. All documentation scripts completed successfully. |
VideoSkeleton accepted an error prop but displayed no message — users saw a red static skeleton with no indication of what went wrong. Changes: - Add error message text below skeleton when error prop is set - Add retry prop (optional callback) with ghost Retry button - Wire playbackInfoState.retry through VideoPreview for transient errors (network failures, timeouts) - Parse errors (deterministic) intentionally omit retry — no point retrying a malformed asset reference Follows InvalidVideoWarning pattern: Card tone + Text + Button from ui-components. Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
⚡️ Editor Performance ReportUpdated Fri, 13 Feb 2026 12:20:10 GMT
Detailed information🏠 Reference resultThe performance result of
🧪 Experiment resultThe performance result of this branch
📚 Glossary
|
Contributor
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||
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
1 participant
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.
Problem
When
getMediaLibraryId()throws (e.g. library ID doesn't start withml), the catch block returnsnull, causinguseVideoPlaybackInfo(null)to return an empty state — not loading, not error, no result. The render logic then falls through to<VideoSkeleton />with no error prop, showing an infinite loading skeleton with no way to recover.Fix
Return the parse error from the
useMemoas a tuple[params, error]and render<VideoSkeleton error={parseError} />when present. This shows the critical-tone skeleton immediately instead of loading forever.Changes
VideoPreview.tsx:videoPlaybackParamsmemo now returns[params, parseError]tuple. Parse error check added before playback info state checks in render.VideoPreview.test.ts: 6 unit tests forgetMediaLibraryIdparse logic (valid refs, invalid prefix, empty strings, missing parts).Follow-up
VideoSkeletoncurrently shows critical tone + stops animation on error, but doesn't display error message text or a retry button. A follow-up commit will enhance the skeleton UX.Testing
npx vitest run src/media-library/plugin/VideoInput/__tests__/VideoPreview.test.ts— 6/6 greennpx tsc --noEmit— no new type errors