1138 add loading state for loading scratch editor#1343
1138 add loading state for loading scratch editor#1343jamiebenstead wants to merge 3 commits intomainfrom
Conversation
jamiebenstead
temporarily deployed
to
previews/1343/merge
GitHub Actions
Inactive
There was a problem hiding this comment.
Pull request overview
Adds a simple pre-render loading indicator for the Scratch editor page and removes it once the Scratch GUI bundle starts executing.
Changes:
- Add a full-viewport
#scratch-loadingelement and CSS animation inscratch.html. - Remove the loading element in
scratch.jsxduring Scratch GUI initialization.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/scratch.jsx | Removes the loading placeholder element when the Scratch entrypoint runs. |
| src/scratch.html | Introduces an inline-styled loading overlay element shown before the app mounts. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const appTarget = document.getElementById("app"); | ||
| document.getElementById("scratch-loading")?.remove(); | ||
| GUI.setAppElement(appTarget); |
There was a problem hiding this comment.
#scratch-loading is removed immediately when this module executes, but React 18 createRoot(...).render(...) may commit asynchronously. That can leave a blank screen (loader removed, GUI not painted yet), undermining the purpose of the loading indicator. Consider removing/fading the loader only after the first React commit (e.g., via a small wrapper component with useEffect, or schedule removal in requestAnimationFrame after render).
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="scratch-loading">loading</div> |
There was a problem hiding this comment.
The loading element is purely visual right now. For accessibility, it should expose a status message to assistive tech (e.g., add role="status" and aria-live="polite", and consider an aria-label if you keep decorative braces via CSS).
| <div id="scratch-loading">loading</div> | |
| <div id="scratch-loading" role="status" aria-live="polite" aria-label="Content is loading">loading</div> |
closes https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1138
Tried copying over and using the Loader component from Standalone. Got it working eventually, but found the timing was off and there was a gap between the loading text fading and scratch showing. So it was much easier to just add in the styling here.