Remix approach for Drawer with Data fetch

[altxnate]

Hello 👋

Im new to Remix but already starting to have some fun using it!

Maybe this question was here before (maybe not), but I'm facing a situation where I need to toggle a higher level drawer component (exist on the root of the app and available for any route) this drawer fetches data from a loader and depends on search params - so there's a navigation.

Question is: with the best UI performant approach how to toggle that drawer UI while the loader deferring the data to it using Async. using any navigtion approach would show the UI in delay which im not happy with :)

(hope this question is clear, if not im here to answer questions)

cheers 🏖️

[alexanderson1993]

useFetcher() is probably your best bet. When the drawer opens you call fetcher.load(). The fetcher will give you a loading state on fetcher.state and you can access the data that it fetches with fetcher.data.

And since you're rendering this at the root of the app, you should be able to prefetch You can even prefetch the data anywhere in your app by using the key parameter. https://remix.run/docs/en/main/hooks/use-fetcher#key

[altxnate]

using the fetcher.load works just great!
thanks a-lot :)

[dest1n1s]

Sorry, but this approach seems only to work when there are a fixed amount of drawers. What if I have a variable amount of drawers, e.g., nested drawers? It seems that I cannot keep all these fetchers' data.