refactor: convert background loader to solid (@miodec) #7387
Conversation
github-actions
bot
added
the
waiting for review
There was a problem hiding this comment.
Pull request overview
This PR refactors the background loader from a module-based implementation to a Solid.js component using signals. The main purpose is to modernize the codebase by converting imperative loader control to a reactive signal-based approach, aligning with the Solid.js framework being adopted.
Changes:
- Deleted the old
frontend/src/ts/elements/loader.tsmodule - Created new
frontend/src/ts/signals/loader-bar.tssignal module withshowLoaderBar()andhideLoaderBar()functions - Created new
frontend/src/ts/components/common/LoaderBar.tsxSolid component - Updated all 30+ files that previously imported and used
Loader.show()/hide()to use the new signal-based functions - Modified HTML to use the LoaderBar component instead of a static div
- Updated CSS styling for the loader bar
Reviewed changes
Copilot reviewed 41 out of 41 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/ts/signals/loader-bar.ts | New signal module providing showLoaderBar/hideLoaderBar API |
| frontend/src/ts/components/common/LoaderBar.tsx | New Solid component implementing loader bar with reactive signal handling |
| frontend/src/ts/components/mount.tsx | Registered LoaderBar component for mounting |
| frontend/src/index.html | Replaced static div with LoaderBar component reference |
| frontend/src/styles/core.scss | Updated loader bar CSS (added top positioning, changed height) |
| frontend/src/ts/elements/loader.ts | Removed old module-based implementation |
| frontend/src/ts/utils/misc.ts | Updated imports + unrelated async keyword additions to promiseWithResolvers |
| frontend/src/ts/modals/quote-rate.ts | Updated imports, missing showLoaderBar call in submit function |
| All other files | Updated imports from Loader module to loader-bar signal functions |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| createEffect(() => { | ||
| const signal = getLoaderBarSignal(); | ||
| const element = loaderEl(); | ||
|
|
||
| if (signal === null || element === undefined) return; | ||
|
|
||
| if (signal.action === "show") { | ||
| showAnimation = element.animate({ | ||
| opacity: 1, | ||
| duration: 125, | ||
| delay: signal.instant ? 0 : 125, | ||
| onBegin: () => { | ||
| element.removeClass("hidden"); | ||
| }, | ||
| }); | ||
| } else { | ||
| showAnimation?.pause(); | ||
| element.animate({ | ||
| opacity: 0, | ||
| duration: 125, | ||
| onComplete: () => { | ||
| element.addClass("hidden"); | ||
| }, | ||
| }); | ||
| } | ||
| }); |
There was a problem hiding this comment.
The debounced animation frame mechanism from the original implementation has been removed. The old loader used requestDebouncedAnimationFrame to batch multiple show/hide calls within the same frame. Without this batching, rapid consecutive calls to showLoaderBar()/hideLoaderBar() could trigger multiple animations and cause visual glitches or performance issues. Consider adding batching logic back or using untrack() if the signal updates should not trigger on every change.
No description provided.