White page until data is loaded - loading skeleton wanted

[pingustar]

I am using tanstack/router with tanstack/query and trying to figure out what the best way for my data loading is.

I want preloading, but also loading skeletons on direct page load or refresh.

It seems that the out-of-the-box preloading only works when I use the loader option in tanstack/router.

But ... that blocks navigation until data is loaded, therefor not showing the loading skeleton, which on app navigation would be fine, as I can use nprogress or similar to indicate the loading status.

But on refresh or when users directly navigate to a page, they get a blank white screen until the data is loaded.

This seems like a common use-case and I am sure there is an easy way to address this - but I seem to be unable to figure out how to do it.

Any help is appreciated - thanks!

[tannerlinsley]

It might be worth mentioning that loaders do not have to await anything, and can simply be used to start a preload. Have you tried that?

[pingustar]

oh wow! Silly me

I did this:

const testRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/test',
  loader: () => queryClient.prefetchQuery(['test'], testFn),
  component: function Test() {
    const { data } = useQuery({
      queryKey: ['test'],
      queryFn: testFn,
    });
    return <div>{data} test page</div>;
  },
});

and I should have done this:

...
  loader: () => {
    void queryClient.prefetchQuery(['test'], testFn);
  },
...

thank you @tannerlinsley - you are the man!