fix: prevent whole app from going blank when loading new pages

Author: scriptcoded

src/icons/icons.tsx

@@ -1,5 +1,5 @@
 import HelpSquareIcon from "@tabler/icons/outline/help-square.svg?raw";
-import { createContext, use } from "react";
+import { createContext, use, useRef } from "react";
 
 const TABLER_ICONS_VERSION = "3.41.1";
 
@@ -8,7 +8,8 @@ type IconMap = Map<string, Promise<string>>;
 const context = createContext<IconMap | null>(null);
 
 export function IconProvider({ children }: { children: React.ReactNode }) {
-  return <context.Provider value={new Map()}>{children}</context.Provider>;
+  const iconMap = useRef(new Map<string, Promise<string>>());
+  return <context.Provider value={iconMap.current}>{children}</context.Provider>;
 }
 
 export function useIcon(

src/routes/_app.tsx

@@ -5,8 +5,8 @@ import {
   useRouter,
   useRouterState,
 } from "@tanstack/react-router";
+import { Suspense, useEffect } from "react";
 import { useAtomValue, useSetAtom } from "jotai";
-import { useEffect } from "react";
 import { AppBar } from "../components/AppBar";
 import { BottomNavigation } from "../components/BottomNavigation";
 import { DevBanner } from "../components/DevBanner";
@@ -78,7 +78,9 @@ function RouteComponent() {
           <AppBar />
 
           <main className="flex-1 overflow-y-hidden">
-            <Outlet />
+            <Suspense>
+              <Outlet />
+            </Suspense>
           </main>
 
           <BottomNavigation />