feat: use deferred store

src/app/settings/page.tsx

@@ -5,7 +5,7 @@ import PageWrapper from '../../components/PageWrapper';
 import * as App from '../../stores/app';
 
 export default function Page() {
-  const developerMode = App.use((state) => state.developerMode);
+  const developerMode = App.useDeferred(false, (state) => state.developerMode);
   const appStore = App.useStore();
 
   return (

src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx

@@ -8,7 +8,7 @@ import * as App from '../../../../../../stores/app';
 import * as Duel from '../../../../../../stores/duel';
 
 export function MetaSection() {
-  const developerMode = App.use((state) => state.developerMode);
+  const developerMode = App.useDeferred(false, (state) => state.developerMode);
   const tank = Duel.use((state) => state.protagonist.tank);
   const rawPrice =
     typeof tank.price === 'number' ? tank.price : tank.price.value;

src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx

@@ -70,12 +70,11 @@ export function Options({ thicknessRange }: OptionsProps) {
   const environment = TankopediaPersistent.use(
     (state) => state.model.visual.environment,
   );
-  const developerMode = App.use((state) => state.developerMode);
+  const developerMode = App.useDeferred(false, (state) => state.developerMode);
   const antagonistGun = Duel.use((state) => state.antagonist.gun);
   const antagonistShell = Duel.use((state) => state.antagonist.shell);
   const [antagonistSelectorOpen, setAntagonistSelectorOpen] = useState(false);
   const antagonistTank = Duel.use((state) => state.antagonist.tank);
-  const antagonistTurret = Duel.use((state) => state.antagonist.turret);
   const hasCalibratedShells = useEquipment(103, true);
   const [tab, setTab] = useState('search');
   const mutateDuel = Duel.useMutation();

src/components/Armor/components/ArmorPlateDisplay.tsx

@@ -22,8 +22,7 @@ export function ArmorPlateDisplay() {
     (state) => state.highlightArmor,
   );
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
-  const developerMode = App.use((state) => state.developerMode);
+  const developerMode = App.useDeferred(false, (state) => state.developerMode);
-  const devThicknessInput = useRef<HTMLInputElement>(null);
   const duelStore = Duel.useStore();
   const input = useRef<HTMLInputElement>(null);
   const tankopediaEphemeralStore = TankopediaEphemeral.useStore();

src/core/zustand/createNextSafeStore.tsx

@@ -1,5 +1,12 @@
 import { Draft, produce } from 'immer';
-import { createContext, ReactNode, useContext, useRef } from 'react';
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { StoreApi, useStore as useStoreZustand } from 'zustand';
 
 type StoreProviderProps<InitData> = {
@@ -49,6 +56,20 @@ export function createNextSafeStore<Store extends StoreApi<unknown>, InitData>(
     );
   }
 
+  function useDeferred<Slice = Type>(
+    initial: Slice,
+    selector: (store: Type) => Slice = (state) => state as Slice,
+  ) {
+    const [state, setState] = useState(initial);
+    const trueState = use(selector);
+
+    useEffect(() => {
+      setState(trueState);
+    }, [trueState]);
+
+    return state;
+  }
+
   function useMutation() {
     const counterStoreContext = useStore();
 
@@ -61,5 +82,5 @@ export function createNextSafeStore<Store extends StoreApi<unknown>, InitData>(
     };
   }
 
-  return { Provider, use, useMutation, useStore };
+  return { Provider, use, useMutation, useStore, useDeferred };
 }

src/stores/app/index.ts

@@ -26,8 +26,8 @@ export interface App {
   policiesAgreementIndex: number;
 }
 
-export const { Provider, use, useMutation, useStore } = createNextSafeStore(
+export const { Provider, use, useMutation, useStore, useDeferred } =
-  () =>
+  createNextSafeStore(() =>
     create<App>()(
       persist(
         (set) => ({
@@ -38,4 +38,4 @@ export const { Provider, use, useMutation, useStore } = createNextSafeStore(
         { name: 'app', merge: (a, b) => merge(b, a) },
       ),
     ),
-);
+  );