Is there any way to delay the first round of route loaders?

[geoff-harper]

I have some stuff I need to do before I can let the loaders of the first matched route (typically the root route and /) get called. I initially tried conditionally rendering the provider and realized that it wasn't doing anything. It seems that the calling of the loader methods is decoupled from the state of the react tree so logic in react seems to be out of the picture? Even commenting out the creation of the vdom doesn't slow it down.

How do I do work on the page before the route tree is built and loader methods are called? If that isn't possible for some reason, is it possible to do what I need to do in the loader of the root route and hold the rest of the tree until it's done?

[geoff-harper]

Doesn't seem like anyone else has this use case? Would something like a bool in the router constructor to stall the process be approriate? The tree can still be passed in for building out the types but it wouldn't call loaders until an enable method is called or something to that effect?

[tigawanna]

There's a beforeLoad middleware that might help

https://github.com/tigawanna/sherpa-firebase/blob/main/src/pages/admin/config.tsx

[geoff-harper]

This is a good shout, thanks for the tip! I was able to get it working the way I'd like without sketchy error swallowing timeout-and-retry

[tigawanna]

How'd you do it ?

[geoff-harper]

I made this little watcher class

export class LoginWatcher {
  readonly ready: Promise<void>;
  private interval?: NodeJS.Timer;
  private counter = 0;

  constructor() {
    this.ready = new Promise((res, rej) => {
      this.interval = setInterval(() => {
        const account = getActiveAccount();

        if (account) {
          clearInterval(this.interval);
          res();
        } else {
          this.counter += 1;

          // 30 seconds
          if (this.counter > 300) {
            rej(new Error('Did not see an active account'));
          }
        }
      }, 100);
    });
  }
}

and then in my root route I added the beforeLoad method that you mentioned

const watcher = new LoginWatcher();

export const rootRoute = new RootRoute({
  component: App,
  errorComponent: MainErrorScreen,

  async beforeLoad() {
    await watcher.ready;
  },

  loader() {
    return queryClient.prefetchQuery({...});
  },
});

My auth lib doesn't have an easily awaitable promise like your seems to so I had to do this little workaround

[tigawanna]

Sweet, I think this will come in handy when I switch to pocketbase