perf: preload theme button and background images on app startup

src/app.tsx

@@ -3,6 +3,7 @@ import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom'
 import { useAccountComment } from '@plebbit/plebbit-react-hooks';
 import { initSnow, removeSnow } from './lib/snow';
 import { isAllView, isModView, isSubscriptionsView } from './lib/utils/view-utils';
+import { preloadThemeAssets } from './lib/utils/preload-utils';
 import useReplyModalStore from './stores/use-reply-modal-store';
 import useCreateBoardModalStore from './stores/use-create-board-modal-store';
 import useSpecialThemeStore from './stores/use-special-theme-store';
@@ -31,6 +32,10 @@ import DirectoryModal from './components/directory-modal';
 import DisclaimerModal from './components/disclaimer-modal';
 import SettingsModal from './components/settings-modal';
 
+// Preload all theme assets (buttons, backgrounds) immediately on app load
+// to prevent visible loading delays when switching themes
+preloadThemeAssets();
+
 const BoardLayout = () => {
   const { accountCommentIndex, boardIdentifier } = useParams();
   const location = useLocation();

src/lib/utils/preload-utils.ts

@@ -0,0 +1,21 @@
+import { THEME_BUTTON_IMAGES, THEME_BACKGROUND_IMAGES } from '../../generated/asset-manifest';
+
+/**
+ * Preloads an array of image URLs by creating Image objects.
+ * Images are loaded in the background and cached by the browser.
+ */
+const preloadImages = (imagePaths: readonly string[]): void => {
+  imagePaths.forEach((path) => {
+    const img = new Image();
+    img.src = `/${path}`;
+  });
+};
+
+/**
+ * Preloads all theme-related assets (buttons, backgrounds) on app startup.
+ * This prevents visible loading delays when switching themes.
+ */
+export const preloadThemeAssets = (): void => {
+  preloadImages(THEME_BUTTON_IMAGES);
+  preloadImages(THEME_BACKGROUND_IMAGES);
+};