feat(console): Improve UX by preventing screen flickering #133
Conversation
solid-router version 0.14.10 prevents the direct usage of useQuery in route components. Data prefetching or alternative strategies may be needed
jingjing2222
changed the title
jingjing2222
changed the title
packages/console/package.json
Outdated
| "@hot-updater/plugin-core": "0.11.0" | ||
| "@hot-updater/core": "0.10.1", | ||
| "@hot-updater/plugin-core": "0.10.1", | ||
| "@tanstack/solid-query": "^5.66.4" |
packages/console/src/App.tsx
Outdated
|
|
||
| onMount(() => { | ||
| setTimeout(() => { | ||
| setOnSuspense(true); |
There was a problem hiding this comment.
I needed that before install @TanStack-Query, but now doesn't.
I will modify that logic soon.
jingjing2222
force-pushed
the
feat/improveux
branch
2 times, most recently
from
db8e8a1 to
4457c44
Compare
packages/console/src/App.tsx
Outdated
| import Home from "./routes"; | ||
| export const queryClient = new QueryClient(); |
There was a problem hiding this comment.
Since it is being provided through a provider, direct access from other places must be prevented.
| export const queryClient = new QueryClient(); | |
| const queryClient = new QueryClient(); |
| const handleClose = () => { | ||
| start(() => { | ||
| setSelectedBundleId(null); | ||
| queryClient.invalidateQueries({ queryKey: ["getBundles"] }); |
There was a problem hiding this comment.
Isn’t it okay if invalidate doesn’t happen when closing?
There was a problem hiding this comment.
handleClose function is only activated with Clicking save button.
I think improving invalidation is safer.. but I don't think that has to be.
How about you? You don't think that as me?
| const [data, { refetch }] = createResource(() => | ||
| api.getBundles.$get().then((res) => res.json()), | ||
| ); | ||
| const data = createQuery(() => ({ |
There was a problem hiding this comment.
It might be a good idea to extract it into hooks:
• useBundles() → returns all bundles
• useBundle(id) → returns a specific bundle
There was a problem hiding this comment.
Console already has that getBundelById(id) in EditBundleSheetContent Component
I think getBundles is better in index.tsx
1. Splash screen displayed only on initial application entry. 2. Minimized data fetching frequency and eliminated visual flickering using @tanstack/solid-query's query key feature.
jingjing2222
force-pushed
the
feat/improveux
branch
from
4457c44 to
d6d2b15
Compare
2025-02-21.11.39.21.mov
Closed #131