TanStack•5mo ago•

6 replies

foolish-indigo

SSR loading state

Is it possible to get SSR page and to also have loading state?
I have a page with data table. Page has search params, like

page

page

limit

limit

sort

sort

and

order

order

.
I want to achieve the behavior that:
1. If user loads page

http://localhost:3000/table?page=1&limit=20&sort=name&order=asc

http://localhost:3000/table?page=1&limit=20&sort=name&order=asc

then the page is ssr-ed to them
2. If user changes

sort

sort

order

order

page

page

on the page by clicking on some button in the table header etc., I want a small spinner or something to show up while the new data is being fetched.

Currently my route looks like that:

export const Route = createFileRoute(
  "/{-$lang}/_layout/_main/_other/data-usage/researches/"
)({
  component: RouteComponent,
  validateSearch: researchesSearchParamsSchema,
  loaderDeps: ({ search: { page, limit, sort, order } }) => ({
    page,
    limit,
    sort,
    order,
  }),

  loader: async ({ deps, context }) => {
    const { data, pagination } = await context.queryClient.ensureQueryData(
      getResearchesQueryOptions({ ...deps, lang: context.lang })
    );

    return { data, pagination };
  },

  errorComponent: ({ error }) => {
    return <div>{error.message}</div>;
  },
});

export const Route = createFileRoute(
  "/{-$lang}/_layout/_main/_other/data-usage/researches/"
)({
  component: RouteComponent,
  validateSearch: researchesSearchParamsSchema,
  loaderDeps: ({ search: { page, limit, sort, order } }) => ({
    page,
    limit,
    sort,
    order,
  }),

  loader: async ({ deps, context }) => {
    const { data, pagination } = await context.queryClient.ensureQueryData(
      getResearchesQueryOptions({ ...deps, lang: context.lang })
    );

    return { data, pagination };
  },

  errorComponent: ({ error }) => {
    return <div>{error.message}</div>;
  },
});

Then in the component,

  const search = Route.useSearch();
  const { lang } = Route.useRouteContext();
  const navigate = Route.useNavigate();

  const { data: researchesData } = useSuspenseQuery(
    getResearchesQueryOptions({ ...search, lang })
  );
// User chages the sorting by clicking title of the table that executes this: 
// navigate({to: ".", search: (prev) => ({order: prev.order==="desc" ? "asc" : "desc"})

  const search = Route.useSearch();
  const { lang } = Route.useRouteContext();
  const navigate = Route.useNavigate();

  const { data: researchesData } = useSuspenseQuery(
    getResearchesQueryOptions({ ...search, lang })
  );
// User chages the sorting by clicking title of the table that executes this: 
// navigate({to: ".", search: (prev) => ({order: prev.order==="desc" ? "asc" : "desc"})

But this results in behavior that when user clicks sort icon, nothing happens for ~0.5 second while the new data is being fetched and SSR-ed, and then, after 0.5 seconds the page changes.

I still want it to be ssr-ed, for SEO purposes, but I also want loading state fire if user changes sorting, page, etc.

TanStack•5mo ago•

6 replies

foolish-indigo

SSR loading state

Is it possible to get SSR page and to also have loading state?
I have a page with data table. Page has search params, like

page

page

limit

limit

sort

sort

and

order

order

.
I want to achieve the behavior that:
1. If user loads page

http://localhost:3000/table?page=1&limit=20&sort=name&order=asc

http://localhost:3000/table?page=1&limit=20&sort=name&order=asc

then the page is ssr-ed to them
2. If user changes

sort

sort

order

order

page

page

on the page by clicking on some button in the table header etc., I want a small spinner or something to show up while the new data is being fetched.

Currently my route looks like that:

export const Route = createFileRoute(
  "/{-$lang}/_layout/_main/_other/data-usage/researches/"
)({
  component: RouteComponent,
  validateSearch: researchesSearchParamsSchema,
  loaderDeps: ({ search: { page, limit, sort, order } }) => ({
    page,
    limit,
    sort,
    order,
  }),

  loader: async ({ deps, context }) => {
    const { data, pagination } = await context.queryClient.ensureQueryData(
      getResearchesQueryOptions({ ...deps, lang: context.lang })
    );

    return { data, pagination };
  },

  errorComponent: ({ error }) => {
    return <div>{error.message}</div>;
  },
});

export const Route = createFileRoute(
  "/{-$lang}/_layout/_main/_other/data-usage/researches/"
)({
  component: RouteComponent,
  validateSearch: researchesSearchParamsSchema,
  loaderDeps: ({ search: { page, limit, sort, order } }) => ({
    page,
    limit,
    sort,
    order,
  }),

  loader: async ({ deps, context }) => {
    const { data, pagination } = await context.queryClient.ensureQueryData(
      getResearchesQueryOptions({ ...deps, lang: context.lang })
    );

    return { data, pagination };
  },

  errorComponent: ({ error }) => {
    return <div>{error.message}</div>;
  },
});

Then in the component,

  const search = Route.useSearch();
  const { lang } = Route.useRouteContext();
  const navigate = Route.useNavigate();

  const { data: researchesData } = useSuspenseQuery(
    getResearchesQueryOptions({ ...search, lang })
  );
// User chages the sorting by clicking title of the table that executes this: 
// navigate({to: ".", search: (prev) => ({order: prev.order==="desc" ? "asc" : "desc"})

  const search = Route.useSearch();
  const { lang } = Route.useRouteContext();
  const navigate = Route.useNavigate();

  const { data: researchesData } = useSuspenseQuery(
    getResearchesQueryOptions({ ...search, lang })
  );
// User chages the sorting by clicking title of the table that executes this: 
// navigate({to: ".", search: (prev) => ({order: prev.order==="desc" ? "asc" : "desc"})

SSR loading state

Similar Threads

SSR loading state

Similar Threads

Similar Threads

Similar Threads