From 59324f7438ee87f0f4ba1fc4a8c1fb153d95c7a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 19 Aug 2024 20:40:50 -0500
Subject: [PATCH] feat: use deferred store

---
 src/app/settings/page.tsx                     |  2 +-
 .../[id]/components/Model/MetaSection.tsx     |  2 +-
 .../components/Model/components/Options.tsx   |  3 +--
 .../Armor/components/ArmorPlateDisplay.tsx    |  3 +--
 src/core/zustand/createNextSafeStore.tsx      | 25 +++++++++++++++++--
 src/stores/app/index.ts                       |  6 ++---
 6 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index b977793ff..8e3ff826e 100644
--- a/src/app/settings/page.tsx
+++ b/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 (
diff --git a/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx
index 6fdbd9316..4523c3190 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx
+++ b/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;
diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
index aa98bea97..0cda66b87 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
+++ b/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();
diff --git a/src/components/Armor/components/ArmorPlateDisplay.tsx b/src/components/Armor/components/ArmorPlateDisplay.tsx
index 99f05cf9d..6de3400cb 100644
--- a/src/components/Armor/components/ArmorPlateDisplay.tsx
+++ b/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 devThicknessInput = useRef<HTMLInputElement>(null);
+  const developerMode = App.useDeferred(false, (state) => state.developerMode);
   const duelStore = Duel.useStore();
   const input = useRef<HTMLInputElement>(null);
   const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
diff --git a/src/core/zustand/createNextSafeStore.tsx b/src/core/zustand/createNextSafeStore.tsx
index 368b18543..fed7d3a5e 100644
--- a/src/core/zustand/createNextSafeStore.tsx
+++ b/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 };
 }
diff --git a/src/stores/app/index.ts b/src/stores/app/index.ts
index 93ed17082..e2b36e328 100644
--- a/src/stores/app/index.ts
+++ b/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) },
       ),
     ),
-);
+  );