From a3392d58dac4806b72ba3a9ef769eb203319afdc Mon Sep 17 00:00:00 2001 From: Olivia Date: Fri, 25 Oct 2024 20:08:18 -0400 Subject: [PATCH] Started using Suspense to prevent early rendering before glb assets are missing --- bun.lockb | Bin 257450 -> 257882 bytes package.json | 4 +- src/components/three-fiber/canvas-router.tsx | 39 +++++++++++-------- src/components/three-fiber/key-group.tsx | 36 +++++++++-------- src/shims/via-app-store.ts | 2 +- src/utils/device-store.ts | 5 +-- 6 files changed, 47 insertions(+), 39 deletions(-) diff --git a/bun.lockb b/bun.lockb index f36000aaf168c59f5ecf19c3c67e761512c56be2..65f642039125cc02a961540c5eb87db068674414 100755 GIT binary patch delta 20881 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 delta 20849 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 ); }, shallowEqual); + export const CanvasRouter = () => { + return ( + + + + ); +}; + +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 ( <> -
{ ref={containerRef} > + { ) ) : null} - {fontLoaded ? ( - - ) : null} +
diff --git a/src/components/three-fiber/key-group.tsx b/src/components/three-fiber/key-group.tsx index 714518d3..a999b06a 100644 --- 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>> = ( 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 : ( ); }); diff --git a/src/shims/via-app-store.ts b/src/shims/via-app-store.ts index 02bfebcc..88d7ed32 100644 --- 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 index ecfd1e88..6690f58d 100644 --- 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: {