Fix showcase spacing and and loading timing

src/components/showcase/row.tsx

@@ -1,10 +1,11 @@
 import { MeshProps, useFrame } from "@react-three/fiber";
-import { Suspense, useRef } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
 import { CoinInstance } from "@/components/coin";
 import { Mesh } from "three";
 import { BanknoteInstance } from "@/components/banknote";
 import { useShowcaseStore } from "./store";
 import { NumistaType } from "@/types/numista";
+import { usePrevious } from "@/core/hooks/use-previous";
 
 const SpinninType = ({
   typeProps,
@@ -69,13 +70,24 @@ const SpinninType = ({
 
 export const Row = () => {
   const ref = useRef<Mesh>(null!);
-  const category = useShowcaseStore((state) => state.category);
   const currentIndex = useShowcaseStore((state) => state.currentIndex);
   const getType = useShowcaseStore((state) => state.getType);
   const isTransitioning = useShowcaseStore((state) => state.isTransitioning);
   const endTransition = useShowcaseStore((state) => state.endTransition);
   const types = useShowcaseStore((state) => state.types);
-  const spacing = category === "banknotes" ? 8 : 6;
+  const [spacing, setSpacing] = useState<number>(0);
+  const delayedIndex = usePrevious(currentIndex);
+
+  useEffect(() => {
+    const updateSpacing = () =>
+      setSpacing(Math.sqrt((48 * window.innerWidth) / window.innerHeight));
+
+    updateSpacing();
+
+    window.addEventListener("resize", updateSpacing);
+
+    return () => window.removeEventListener("resize", updateSpacing);
+  }, []);
 
   useFrame(() => {
     if (!isTransitioning) {
@@ -88,7 +100,6 @@ export const Row = () => {
     if (Math.abs(diff) > 1 / 32) {
       ref.current.position.x -= diff / 16;
     } else {
-      console.log("ending transition");
       endTransition();
     }
   });
@@ -97,7 +108,7 @@ export const Row = () => {
     <mesh ref={ref}>
       {types.map(
         (type, index) =>
-          Math.abs(index - currentIndex) <= 1 && (
+          Math.abs(index - delayedIndex) <= 2 && (
             <Suspense key={type.id} fallback={null}>
               <SpinninType
                 typeProps={getType(index)}

src/components/showcase/store.ts

@@ -30,6 +30,8 @@ export const useShowcaseStore = create<ShowcaseStore>((set, get) => ({
   orbitControlsRef: createRef(),
   nextIndex: () =>
     set((state) => {
+      state.orbitControlsRef.current?.setAzimuthalAngle(0);
+      state.orbitControlsRef.current?.setPolarAngle(Math.PI / 2);
       const currentIndex = Math.min(
         state.currentIndex + 1,
         state.types.length - 1,
@@ -42,6 +44,8 @@ export const useShowcaseStore = create<ShowcaseStore>((set, get) => ({
     }),
   previousIndex: () =>
     set((state) => {
+      state.orbitControlsRef.current?.setAzimuthalAngle(0);
+      state.orbitControlsRef.current?.setPolarAngle(Math.PI / 2);
       const currentIndex = Math.max(state.currentIndex - 1, 0);
       return {
         currentIndex,

src/core/hooks/use-previous.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from "react";
+
+export function usePrevious<T>(value: T): T {
+  const ref = useRef<T>(value);
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}