Pending Component not working properly!

After trying things out looks like if i make the load function async it works! And renders the pending component:

 loader: async ({ context }) => {
    console.log("waiting...", context);
    await sleep(5000);
    console.log("done waiting");
    return {
      isAuthenticated: false,
    };
  },

 loader: async ({ context }) => {
    console.log("waiting...", context);
    await sleep(5000);
    console.log("done waiting");
    return {
      isAuthenticated: false,
    };
  },

 loader: async ({ context }) => {
    console.log("waiting...", context);
    await sleep(5000);
    console.log("done waiting");
    return {
      isAuthenticated: false,
    };
  },

 loader: async ({ context }) => {
    console.log("waiting...", context);
    await sleep(5000);
    console.log("done waiting");
    return {
      isAuthenticated: false,
    };
  },

But for the before load function it still behaves the same! Even though I pass async functions.
But beforeLoad time should also be considered for waiting! Becuase without before load we are not given any option to update the router context! What do I do now? becaase i was needing to share my fetched session via context! and not by calling the tanstack use query everytime!

Pending Component not working properly!

Similar Threads

Similar Threads

Similar Threads