fix: lazy loading messing up custom css

.github/workflows/build.yml

@@ -1,5 +1,9 @@
 name: Build
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 on: pull_request
 
 jobs:

.github/workflows/lint.yml

@@ -1,5 +1,9 @@
 name: Lint
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 on: pull_request
 
 jobs:

.github/workflows/release.yml

@@ -1,5 +1,9 @@
 name: Release
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 on:
   push:
     branches: main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydralauncher",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "Hydra",
   "main": "./out/main/index.js",
   "author": "Los Broxas",

src/renderer/src/app.tsx

@@ -263,9 +263,7 @@ export function App() {
 
   useEffect(() => {
     const unsubscribe = window.electron.onCssInjected((cssString) => {
-      if (cssString) {
-        injectCustomCss(cssString);
-      }
+      injectCustomCss(cssString);
     });
 
     return () => unsubscribe();

src/renderer/src/components/backdrop/backdrop.tsx

@@ -6,7 +6,10 @@ export interface BackdropProps {
   children: React.ReactNode;
 }
 
-export function Backdrop({ isClosing = false, children }: BackdropProps) {
+export function Backdrop({
+  isClosing = false,
+  children,
+}: Readonly<BackdropProps>) {
   return (
     <div
       className={cn("backdrop", {

src/renderer/src/components/button/button.tsx

@@ -15,7 +15,7 @@ export function Button({
   theme = "primary",
   className,
   ...props
-}: ButtonProps) {
+}: Readonly<ButtonProps>) {
   return (
     <button
       type="button"

src/renderer/src/main.tsx

@@ -18,26 +18,17 @@ import { store } from "./store";
 
 import resources from "@locales";
 
-import { SuspenseWrapper } from "./components";
 import { logger } from "./logger";
 import { addCookieInterceptor } from "./cookies";
-
-const Home = React.lazy(() => import("./pages/home/home"));
-const GameDetails = React.lazy(
-  () => import("./pages/game-details/game-details")
-);
-const Downloads = React.lazy(() => import("./pages/downloads/downloads"));
-const Settings = React.lazy(() => import("./pages/settings/settings"));
-const Catalogue = React.lazy(() => import("./pages/catalogue/catalogue"));
-const Profile = React.lazy(() => import("./pages/profile/profile"));
-const Achievements = React.lazy(
-  () => import("./pages/achievements/achievements")
-);
-const ThemeEditor = React.lazy(
-  () => import("./pages/theme-editor/theme-editor")
-);
-
 import * as Sentry from "@sentry/react";
+import Catalogue from "./pages/catalogue/catalogue";
+import Home from "./pages/home/home";
+import Downloads from "./pages/downloads/downloads";
+import GameDetails from "./pages/game-details/game-details";
+import Settings from "./pages/settings/settings";
+import Profile from "./pages/profile/profile";
+import Achievements from "./pages/achievements/achievements";
+import ThemeEditor from "./pages/theme-editor/theme-editor";
 
 Sentry.init({
   dsn: import.meta.env.RENDERER_VITE_SENTRY_DSN,
@@ -82,37 +73,16 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
       <HashRouter>
         <Routes>
           <Route element={<App />}>
-            <Route path="/" element={<SuspenseWrapper Component={Home} />} />
-            <Route
-              path="/catalogue"
-              element={<SuspenseWrapper Component={Catalogue} />}
-            />
-            <Route
-              path="/downloads"
-              element={<SuspenseWrapper Component={Downloads} />}
-            />
-            <Route
-              path="/game/:shop/:objectId"
-              element={<SuspenseWrapper Component={GameDetails} />}
-            />
-            <Route
-              path="/settings"
-              element={<SuspenseWrapper Component={Settings} />}
-            />
-            <Route
-              path="/profile/:userId"
-              element={<SuspenseWrapper Component={Profile} />}
-            />
-            <Route
-              path="/achievements"
-              element={<SuspenseWrapper Component={Achievements} />}
-            />
+            <Route path="/" element={<Home />} />
+            <Route path="/catalogue" element={<Catalogue />} />
+            <Route path="/downloads" element={<Downloads />} />
+            <Route path="/game/:shop/:objectId" element={<GameDetails />} />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="/profile/:userId" element={<Profile />} />
+            <Route path="/achievements" element={<Achievements />} />
           </Route>
 
-          <Route
-            path="/theme-editor"
-            element={<SuspenseWrapper Component={ThemeEditor} />}
-          />
+          <Route path="/theme-editor" element={<ThemeEditor />} />
         </Routes>
       </HashRouter>
     </Provider>

src/renderer/src/pages/settings/aparence/settings-appearance.tsx

@@ -110,6 +110,7 @@ export function SettingsAppearance({
           onClose={() => {
             setIsImportThemeModalVisible(false);
             clearTheme();
+            setHasShownModal(false);
           }}
           onThemeImported={onThemeImported}
           themeName={importTheme.theme}