fair-rose

How to access isLoading when using Start+Query in spa mode

Hi guys I need to build a app with Tanstack start & query, the app should have a good experience when using spa mode because maybe I didn't have enough resources to deploy a ssr server. I tried to read the doc https://tanstack.com/router/latest/docs/integrations/query , and I think I need to run the fetch function in route's loader function and return the data. That will be ok if using ssr mode, since the fetch will run on server and then response the rendered page, but when using in spa mode, we can only get a blank page if the loader is not finish, so can we for example access isLoading so that we can create a skeleton when the data fetch is not finished?

TanStack Query Integration | TanStack Router Docs

[!IMPORTANT] This integration automates SSR dehydration/hydration and streaming between TanStack Router and TanStack Query. If you haven't read the standard guide, start there. What you get Automatic...

9 Replies

wise-white•2mo ago

can you please provide a complete example that shows the issue you are experiencing?

fair-roseOP•2mo ago

Thanks for your help! I have create a easy example on the basis of 'start-basic-react-query' : https://github.com/bhscer/start-query-spa-need-isLoading . I modified the file 'posts.route.tsx' and added what I want, also changed function 'fetchPosts' into a normal fetch function with 2s delay, and changed the 'vite.config.ts' to enable spa is env.VITE_FULL_SPA is true. You can run 'dev:spa' , and find the posts page blank for a long time, and the 'Loading...' text never appear.

GitHub

GitHub - bhscer/start-query-spa-need-isLoading

Contribute to bhscer/start-query-spa-need-isLoading development by creating an account on GitHub.

wise-white•2mo ago

add a pending component

diff --git a/src/routes/posts.route.tsx b/src/routes/posts.route.tsx
index 911b4c4..ad9027e 100644
--- a/src/routes/posts.route.tsx
+++ b/src/routes/posts.route.tsx
@@ -10,6 +10,7 @@ export const Route = createFileRoute("/posts")({
     meta: [{ title: "Posts" }],
   }),
   component: PostsComponent,
+  pendingComponent: () => <span>Loading...</span>,
 });
 
 function PostsComponent() {

diff --git a/src/routes/posts.route.tsx b/src/routes/posts.route.tsx
index 911b4c4..ad9027e 100644
--- a/src/routes/posts.route.tsx
+++ b/src/routes/posts.route.tsx
@@ -10,6 +10,7 @@ export const Route = createFileRoute("/posts")({
     meta: [{ title: "Posts" }],
   }),
   component: PostsComponent,
+  pendingComponent: () => <span>Loading...</span>,
 });
 
 function PostsComponent() {

fair-roseOP•2mo ago

Thanks! That works!

fair-roseOP•2mo ago

I'm sorry to bother you again. I have create three routes 'loading.tsx' 'pathless.loading.tsx' 'anypath/loading.tsx' , the pervious two works well (we can see the loading text) , but last one we only get a blank page when loader is not finished. You can see this demo at the https://github.com/bhscer/start-query-spa-need-isLoading

GitHub

GitHub - bhscer/start-query-spa-need-isLoading

Contribute to bhscer/start-query-spa-need-isLoading development by creating an account on GitHub.

wise-white•2mo ago

in SPA mode the pending component of the first route below root will be shown. in your case, there is none for anypath/route.tsx hence nothing is shown

fair-roseOP•2mo ago

That's a bad news. So maybe I need to switch to use Tanstack router instead of start if I need a good SPA experience first.

other-emerald•2mo ago

How do you plan to do it with Router? And why doesn't it allow you to do it with Start?

fair-roseOP•2mo ago

Hi, I need to build a web app, and currently I need to deploy it in SPA mode, and maybe one day I will changed to deploy in SSR mode, so I need to create a skeleton if I'm fetching something in a component. So for example

<MainLayout>
  <ProductLayout>
    <!-- ProductSomething's loader is still running -->
    <ProductSomething />
  </ProductLayout>
</MainLayout>

<MainLayout>
  <ProductLayout>
    <!-- ProductSomething's loader is still running -->
    <ProductSomething />
  </ProductLayout>
</MainLayout>

In this case, when fetching something in ProductSomething component, I hope MainLayout and ProductLayout can keep shown, and ProductSomething show a 'pendingComponent' , but it seems we can't easily achieve this now (or maybe I misunderstood the earlier reply?) And the most important is that I reconsidered my project, maybe SPA is acceptable currently, prioritize shipping the first version quickly, so maybe just use router to focus on SPA to create a initial version is better for me.

Gaming

Programming

How to access isLoading when using Start+Query in spa mode

Did you find this page helpful?