switch to async storage for faster loading

src/components/AppProvider.tsx

@@ -1,18 +1,48 @@
 "use client";
 
 import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
-
-type AppProviderProps = {
-  children: React.ReactNode;
-};
-
-export function AppProvider({ children }: AppProviderProps) {
-  return <>{children}</>;
-}
-
+import { useSettingsStore } from "@/store/settingsStore";
+import React from "react";
 const UPDATE_INTERVAL = 1000 * 60 * 15; // 15 minutes
 
-useScoresaberScoresStore.getState().updatePlayerScores();
-setInterval(() => {
-  useScoresaberScoresStore.getState().updatePlayerScores();
-}, UPDATE_INTERVAL);
+export default class AppProvider extends React.Component {
+  _state = {
+    mounted: false, // Whether the component has mounted
+    // Whether the data from the async storage has been loaded
+    dataLoaded: {
+      scores: false,
+      settings: false,
+    },
+  };
+
+  async componentDidMount(): Promise<void> {
+    if (this._state.mounted) {
+      return;
+    }
+    this._state.mounted = true;
+
+    // Load data from async storage
+    await useSettingsStore.persist.rehydrate();
+    await useScoresaberScoresStore.persist.rehydrate();
+
+    await useSettingsStore.getState().refreshProfiles();
+    setInterval(() => {
+      useSettingsStore.getState().refreshProfiles();
+    }, UPDATE_INTERVAL);
+
+    await useScoresaberScoresStore.getState().updatePlayerScores();
+    setInterval(() => {
+      useScoresaberScoresStore.getState().updatePlayerScores();
+    }, UPDATE_INTERVAL);
+  }
+
+  constructor(props: any) {
+    super(props);
+  }
+
+  render(): React.ReactNode {
+    const props: any = this.props;
+
+    return <>{props.children}</>;
+  }
+}

src/components/player/PlayerPage.tsx

@@ -8,6 +8,7 @@ import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+import useStore from "@/utils/useStore";
 import dynamic from "next/dynamic";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -27,6 +28,7 @@ type PlayerPageProps = {
 const DEFAULT_SORT_TYPE = SortTypes.top;
 
 export default function PlayerPage({ id }: PlayerPageProps) {
+  const settingsStore = useStore(useSettingsStore, (store) => store);
   const searchParams = useSearchParams();
 
   const [mounted, setMounted] = useState(false);
@@ -49,8 +51,7 @@ export default function PlayerPage({ id }: PlayerPageProps) {
   let sortType: SortType;
   const sortTypeString = searchParams.get("sort");
   if (sortTypeString == null) {
-    sortType =
-      useSettingsStore.getState().lastUsedSortType || DEFAULT_SORT_TYPE;
+    sortType = settingsStore?.lastUsedSortType || DEFAULT_SORT_TYPE;
   } else {
     sortType = SortTypes[sortTypeString] || DEFAULT_SORT_TYPE;
   }

src/components/player/Scores.tsx

@@ -3,6 +3,7 @@ import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+import useStore from "@/utils/useStore";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
@@ -27,6 +28,7 @@ type ScoresProps = {
 };
 
 export default function Scores({ playerData, page, sortType }: ScoresProps) {
+  const settingsStore = useStore(useSettingsStore, (store) => store);
   const playerId = playerData.id;
 
   const router = useRouter();
@@ -61,9 +63,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
             page: page,
             sortType: sortType,
           });
-          useSettingsStore.setState({
-            lastUsedSortType: sortType,
-          });
+          settingsStore?.setLastUsedSortType(sortType);
 
           if (page > 1) {
             router.push(
@@ -80,7 +80,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
         },
       );
     },
-    [playerId, router, scores],
+    [playerId, router, scores, settingsStore],
   );
 
   useEffect(() => {