loading state for indexdb sync

[FatahChan]

indexedb is async, I do some logic during the render phase. and don't want to use useEffect if I can avoid it
account$ is a supabase observable.

this is my current implementation, but I feel there is alot of inefficiencies.

export const useAccountQuery = () => {
  const syncState$ = syncState(account$);
  const account = use$(account$);
  return useQuery({
    queryKey: ["account", account],
    queryFn: async () => {
      await when(syncState$.isPersistLoaded);
      return Object.values(account$.get() ?? {});
    },
  });
};

Please suggest a better way to load the data, with a loading state