Experimental preload icons

src/app.jsx

@@ -21,7 +21,7 @@ import { useSnapshot } from 'valtio';
 import AccountSheet from './components/account-sheet';
 import Compose from './components/compose';
 import Drafts from './components/drafts';
-import Icon from './components/icon';
+import Icon, { ICONS } from './components/icon';
 import Loader from './components/loader';
 import MediaModal from './components/media-modal';
 import Modal from './components/modal';
@@ -66,6 +66,19 @@ import usePageVisibility from './utils/usePageVisibility';
 
 window.__STATES__ = states;
 
+// Preload icons
+// There's probably a better way to do this
+// Related: https://github.com/vitejs/vite/issues/10600
+setTimeout(() => {
+  for (const icon in ICONS) {
+    if (Array.isArray(ICONS[icon])) {
+      ICONS[icon][0]?.();
+    } else {
+      ICONS[icon]?.();
+    }
+  }
+}, 5000);
+
 function App() {
   const snapStates = useSnapshot(states);
   const [isLoggedIn, setIsLoggedIn] = useState(false);

src/components/icon.jsx

@@ -8,7 +8,7 @@ const SIZES = {
   xxl: 32,
 };
 
-const ICONS = {
+export const ICONS = {
   x: () => import('@iconify-icons/mingcute/close-line'),
   heart: () => import('@iconify-icons/mingcute/heart-line'),
   bookmark: () => import('@iconify-icons/mingcute/bookmark-line'),