Started using Suspense to prevent early rendering before glb assets a…

…re missing
the-via · Oct 26, 2024 · a3392d5 · a3392d5
1 parent fbcaca3
commit a3392d5
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 39 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -40,8 +40,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "react-redux": "^8.0.5",
-    "react-select": "^5.7.0",
+    "react-redux": "^9.1.2",
+    "react-select": "^5.8.1",
     "react-textarea-autosize": "^8.4.0",
     "redux-logger": "^3.0.6",
     "styled-components": "^6.0.0-beta.5",

diff --git a/src/components/three-fiber/canvas-router.tsx b/src/components/three-fiber/canvas-router.tsx
@@ -12,7 +12,7 @@ import {Canvas} from '@react-three/fiber';
 import {DefinitionVersionMap, KeyColorType} from '@the-via/reader';
 import cubeySrc from 'assets/models/cubey.glb';
 import glbSrc from 'assets/models/keyboard_components.glb';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {Suspense, useCallback, useEffect, useMemo, useRef} from 'react';
 import {shallowEqual} from 'react-redux';
 import {
   getCustomDefinitions,
@@ -40,6 +40,7 @@ import {Test} from '../n-links/keyboard/test';
 import {Camera} from './camera';
 import {LoaderCubey} from './loader-cubey';
 import {UpdateUVMaps} from './update-uv-maps';
+
 useGLTF.preload(cubeySrc, true, true);
 useGLTF.preload(glbSrc, true, true);
 
@@ -62,7 +63,21 @@ const KeyboardBG: React.FC<{
     </mesh>
   );
 }, shallowEqual);
+
 export const CanvasRouter = () => {
+  return (
+    <Suspense fallback={null}>
+      <LazyRouter />
+    </Suspense>
+  );
+};
+
+const LazyRouter = React.lazy(async () => {
+  await document.fonts.load('bold 16px Fira Sans').finally();
+  return {default: NonSuspenseCanvasRouter};
+});
+
+export const NonSuspenseCanvasRouter = () => {
   const [path] = useLocation();
   const body = useRef(document.body);
   const containerRef = useRef(null);
@@ -75,9 +90,9 @@ export const CanvasRouter = () => {
   const definitionVersion = useAppSelector(getDesignDefinitionVersion);
   const theme = useAppSelector(getSelectedTheme);
   const accentColor = useMemo(() => theme[KeyColorType.Accent].c, [theme]);
-  const [fontLoaded, setLoaded] = useState(false);
   const showLoader =
     path === '/' && (!selectedDefinition || loadProgress !== 1);
+  useGLTF(glbSrc, true, true);
   const versionDefinitions: DefinitionVersionMap[] = useMemo(
     () =>
       localDefinitions.filter(
@@ -105,15 +120,8 @@ export const CanvasRouter = () => {
   );
 
   const hideTerrainBG = showLoader;
-  useEffect(() => {
-    // Block rendering due to font legend being required to render keyboardss
-    document.fonts.load('bold 16px Fira Sans').finally(() => {
-      setLoaded(true);
-    });
-  }, []);
   return (
     <>
-      <UpdateUVMaps />
       <div
         style={{
           height: 500,
@@ -134,6 +142,7 @@ export const CanvasRouter = () => {
         ref={containerRef}
       >
         <Canvas flat={true} shadows style={{overflow: 'visible'}}>
+          <UpdateUVMaps />
           <Lights />
           <KeyboardBG
             onClick={terrainOnClick}
@@ -181,13 +190,11 @@ export const CanvasRouter = () => {
               )
             ) : null}
           </Html>
-          {fontLoaded ? (
-            <KeyboardGroup
-              containerRef={containerRef}
-              configureKeyboardIsSelectable={configureKeyboardIsSelectable}
-              loadProgress={loadProgress}
-            />
-          ) : null}
+          <KeyboardGroup
+            containerRef={containerRef}
+            configureKeyboardIsSelectable={configureKeyboardIsSelectable}
+            loadProgress={loadProgress}
+          />
         </Canvas>
       </div>
     </>

diff --git a/src/components/three-fiber/key-group.tsx b/src/components/three-fiber/key-group.tsx
@@ -1,27 +1,27 @@
 import {useGLTF} from '@react-three/drei';
+import {ThreeEvent} from '@react-three/fiber';
+import glbSrc from 'assets/models/keyboard_components.glb';
 import {useMemo} from 'react';
 import {getBasicKeyToByte} from 'src/store/definitionsSlice';
 import {useAppDispatch, useAppSelector} from 'src/store/hooks';
 import {getSelectedKey} from 'src/store/keymapSlice';
-import {Keycap} from './unit-key/keycap';
+import {getExpressions} from 'src/store/macrosSlice';
+import {getSelectedSRGBTheme} from 'src/store/settingsSlice';
+import {KeyGroupProps, KeysKeys} from 'src/types/keyboard-rendering';
+import {getRGB} from 'src/utils/color-math';
 import {
   calculateKeyboardFrameDimensions,
   CSSVarObject,
   KeycapMetric,
 } from 'src/utils/keyboard-rendering';
-import {getSelectedSRGBTheme} from 'src/store/settingsSlice';
-import {ThreeEvent} from '@react-three/fiber';
-import {getRGB} from 'src/utils/color-math';
+import {useSkipFontCheck} from 'src/utils/use-skip-font-check';
 import {Color} from 'three';
-import glbSrc from 'assets/models/keyboard_components.glb';
-import {getExpressions} from 'src/store/macrosSlice';
 import {
   getKeycapSharedProps,
   getKeysKeys,
   getLabels,
 } from '../n-links/key-group';
-import {KeyGroupProps, KeysKeys} from 'src/types/keyboard-rendering';
-import {useSkipFontCheck} from 'src/utils/use-skip-font-check';
+import {Keycap} from './unit-key/keycap';
 
 const getSRGBArray = (keyColors: number[][]) => {
   return keyColors.map(([hue, sat]) => {
@@ -73,23 +73,25 @@ export const KeyGroup: React.FC<KeyGroupProps<ThreeEvent<MouseEvent>>> = (
   const elems = useMemo(() => {
     return props.keys.map((k, i) => {
       const {meshKey} = keysKeys.coords[i];
+      const {key, ...otherProps} = getKeycapSharedProps(
+        k,
+        i,
+        props,
+        keysKeys,
+        selectedKeyIndex,
+        labels,
+        skipFontCheck,
+      );
       return k.d ? null : (
         <Keycap
+          key={key}
           keycapGeometry={
             (
               (keycapScene.getObjectByName(meshKey) as any) ||
               keycapScene.getObjectByName('K-R1-100')
             ).geometry
           }
-          {...getKeycapSharedProps(
-            k,
-            i,
-            props,
-            keysKeys,
-            selectedKeyIndex,
-            labels,
-            skipFontCheck,
-          )}
+          {...otherProps}
         />
       );
     });

diff --git a/src/shims/via-app-store.ts b/src/shims/via-app-store.ts
@@ -1,5 +1,5 @@
-import type {StoreData} from '../types/types';
 import defaultsDeep from 'lodash.defaultsdeep';
+import type {StoreData} from '../types/types';
 
 export class Store {
   store: StoreData;

diff --git a/src/utils/device-store.ts b/src/utils/device-store.ts
@@ -10,13 +10,12 @@ import {TestKeyboardSoundsMode} from 'src/components/void/test-keyboard-sounds';
 import {THEMES} from 'src/utils/themes';
 import {Store} from '../shims/via-app-store';
 import type {
+  AuthorizedDevice,
   DefinitionIndex,
-  VendorProductIdMap,
   Settings,
-  AuthorizedDevice,
+  VendorProductIdMap,
 } from '../types/types';
 import {getVendorProductId} from './hid-keyboards';
-
 let deviceStore: Store;
 const defaultStoreData = {
   definitionIndex: {