Loading component?

Hi yall, sorry if this is covered, but I can't seem to find this in the docs:
Is there a way to have a loading component, like how

errorComponent

errorComponent

key exists in

Route

Route

const searchContentRoute = new Route({
  getParentRoute: () => contentRoute,
  path: "/search",
  component: SearchContent,
  loader: async () => {
    // Get posts
    await new Promise((resolve) => setTimeout(resolve, 3000));

    const posts = await getPosts();

    return posts;
  },
  errorComponent: () => {
    return <div>error component</div>;
  },
});

const searchContentRoute = new Route({
  getParentRoute: () => contentRoute,
  path: "/search",
  component: SearchContent,
  loader: async () => {
    // Get posts
    await new Promise((resolve) => setTimeout(resolve, 3000));

    const posts = await getPosts();

    return posts;
  },
  errorComponent: () => {
    return <div>error component</div>;
  },
});

In the example above, if

getPosts

getPosts

throws an error, it shows the error component, but I can't find

loadingComponent

loadingComponent

. Is there another pattern that I should be aware of? Thanks!

TanStack•3y ago•

2 replies

worthy-azure

Loading component?

Hi yall, sorry if this is covered, but I can't seem to find this in the docs:
Is there a way to have a loading component, like how

errorComponent

errorComponent

key exists in

Route

Route

const searchContentRoute = new Route({
  getParentRoute: () => contentRoute,
  path: "/search",
  component: SearchContent,
  loader: async () => {
    // Get posts
    await new Promise((resolve) => setTimeout(resolve, 3000));

    const posts = await getPosts();

    return posts;
  },
  errorComponent: () => {
    return <div>error component</div>;
  },
});

const searchContentRoute = new Route({
  getParentRoute: () => contentRoute,
  path: "/search",
  component: SearchContent,
  loader: async () => {
    // Get posts
    await new Promise((resolve) => setTimeout(resolve, 3000));

    const posts = await getPosts();

    return posts;
  },
  errorComponent: () => {
    return <div>error component</div>;
  },
});

In the example above, if

getPosts

getPosts

throws an error, it shows the error component, but I can't find

loadingComponent

loadingComponent

. Is there another pattern that I should be aware of? Thanks!

Loading component?

Similar Threads

Loading component?

Similar Threads

Similar Threads

Similar Threads