feat(hub-ui): add loading placeholder for iframes - #247
Merged
Conversation
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
2 participants
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.
What
@devframes/hub-ui, with a Storybook story to preview it.Cannot read properties of undefined (reading 'configs')).Iframe loading placeholder
The previous placeholder (
Loading iframe...,z--1) sat behind theiframe-paneoverlay, so it was never actually visible — a freshly-mounted iframe just paints white while its content loads. This gives dock iframes a real, visible loading state on first load and on hard navigation/refresh.In
ViewIframe.vue:isIframeLoading, so the placeholder covers the initial load, not just later navigations. Re-mounting an existing pane (tab switch / sharedframeIdhandoff) leaves it off, so there's no flash on switches.pane.hide()s while loading (in addition to the assets-error case), reusing the same layering trick asViewAssetsError— the frame stays alive and keeps loading behind the placeholder.ViewIframeLoading.vue(mirroring howViewAssetsErroris structured): a centeredabsolute inset-0 bg-baseoverlay using the shared design-system tokens — a duotone spinner (i-ph:circle-notch-duotone animate-spin,color-faint) and acolor-muted"Loading…" label.Storybook
ViewIframeLoading.stories.ts(Views/IframeLoading) previews the placeholder in a stage that mirrors the iframe view frame — following theViewAssetsErrorstory pattern, so it renders deterministically without wiring up theiframe-panemachinery.createDocksContexteagerly readsrpc.connectionMeta.configs?.ui?.dockPreferences?.categoryOrder, but the story-onlyMockRpcClientnever providedconnectionMeta. Added a minimal validconnectionMeta: { backend: 'static' }to the mock rpc — stories have no live server, and the context readsconfigsoptionally, so an empty meta is enough.This PR was created with the help of an agent.