[backport core/1.33] Fix skeleton loaders for Image/Video Previews #7248
Conversation
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
This pull request refines the loading and error handling logic for both the `VideoPreview.vue` and `ImagePreview.vue` components. The main improvements include making the loading skeleton more accurate and visually consistent, updating how loading and error states are managed when URLs change, and ensuring that the main media elements are hidden while loading. These changes enhance the user experience by providing clearer feedback during media load operations. **Loading and error state improvements:** * The loading skeleton in both `VideoPreview.vue` and `ImagePreview.vue` now only appears when loading and no error is present, with updated styling and fixed dimensions for better consistency. (`VideoPreview.vue` [[1]](diffhunk://#diff-17b5c19b4628f22e45570b66a85ed1fc16e931dd368fe420584d487e522ab8aaL29-R41) `ImagePreview.vue` [[2]](diffhunk://#diff-0c0b17c5c68464e0284398ad42b823509d414c9cf297f3bc2aa2b00e0f9c2015L29-R48) * The main video and image elements are now hidden (using the `invisible` class) while loading, preventing display glitches before the media is ready. (`VideoPreview.vue` [[1]](diffhunk://#diff-17b5c19b4628f22e45570b66a85ed1fc16e931dd368fe420584d487e522ab8aaL29-R41) `ImagePreview.vue` [[2]](diffhunk://#diff-0c0b17c5c68464e0284398ad42b823509d414c9cf297f3bc2aa2b00e0f9c2015L29-R48) * The loading state (`isLoading`) is now set to `true` whenever new URLs are provided, and reset appropriately when navigating between media items, ensuring accurate feedback to the user. (`VideoPreview.vue` [[1]](diffhunk://#diff-17b5c19b4628f22e45570b66a85ed1fc16e931dd368fe420584d487e522ab8aaL145-R152) `ImagePreview.vue` [[2]](diffhunk://#diff-0c0b17c5c68464e0284398ad42b823509d414c9cf297f3bc2aa2b00e0f9c2015L164-R176) [[3]](diffhunk://#diff-0c0b17c5c68464e0284398ad42b823509d414c9cf297f3bc2aa2b00e0f9c2015L224-R236) **Code consistency and maintainability:** * Both components now import and use the shared `cn` utility for conditional class names, improving code consistency and maintainability. (`VideoPreview.vue` [[1]](diffhunk://#diff-17b5c19b4628f22e45570b66a85ed1fc16e931dd368fe420584d487e522ab8aaR115) `ImagePreview.vue` [[2]](diffhunk://#diff-0c0b17c5c68464e0284398ad42b823509d414c9cf297f3bc2aa2b00e0f9c2015R132) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7094-Fix-skeleton-loaders-for-Image-Video-Previews-2bd6d73d3650817989e1f4d597094016) by [Unito](https://www.unito.io)
dosubot
bot
added
the
size:M
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/08/2025, 11:30:40 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 12/08/2025, 11:43:20 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
christian-byrne
approved these changes
Dec 9, 2025
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.
Backport of #7094 to
core/1.33Automatically created by backport workflow.
┆Issue is synchronized with this Notion page by Unito