diff --git a/src/app.jsx b/src/app.jsx index 0d303bbb..c6b07843 100644 --- a/src/app.jsx +++ b/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); diff --git a/src/components/icon.jsx b/src/components/icon.jsx index 6c2d3f5a..a0b5e483 100644 --- a/src/components/icon.jsx +++ b/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'),