Add an indicator when Combined mode is loading (#308)

* Add an indicator when Combined mode is loading
Fixes #297

* Proper centering

* Clean up

src/components/Loading.tsx

@@ -2,7 +2,12 @@ import { Box, Spinner } from '@primer/react'
 
 export function Loading() {
     return (
-        <Box display="flex" alignItems="center" justifyContent="space-around">
+        <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="space-around"
+            height="100%"
+        >
             <Box display="block" py={4}>
                 <Spinner size="large" />
             </Box>

src/components/viewer/CadDiff.tsx

@@ -20,6 +20,7 @@ import { getCommonSphere, loadGeometry } from '../../utils/three'
 import { OrbitControls } from 'three-stdlib'
 import { RecenterButton } from './RecenterButton'
 import { ErrorMessage } from './ErrorMessage'
+import { Loading } from '../Loading'
 
 function Viewer3D2Up({
     beforeGeometry,
@@ -116,8 +117,14 @@ function Viewer3DCombined({
     const [showUnchanged, setShowUnchanged] = useState(true)
     const [showAdditions, setShowAdditions] = useState(true)
     const [showDeletions, setShowDeletions] = useState(true)
+    const [rendering, setRendering] = useState(true)
     return (
         <>
+            {rendering && (
+                <Box top={0} left={0} right={0} bottom={0} position="absolute">
+                    <Loading />
+                </Box>
+            )}
             <Viewer3D
                 geometry={beforeGeometry}
                 boundingSphere={boundingSphere}
@@ -133,6 +140,7 @@ function Viewer3DCombined({
                     showUnchanged={showUnchanged}
                     showAdditions={showAdditions}
                     showDeletions={showDeletions}
+                    onRendered={() => setRendering(false)}
                 />
             </Viewer3D>
             <LegendBox>

src/components/viewer/CombinedModel.tsx

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from 'react'
+import { MutableRefObject, useState } from 'react'
 import { useTheme } from '@primer/react'
 import { BufferGeometry, Sphere } from 'three'
 import { Geometry, Base, Subtraction, Intersection } from '@react-three/csg'
@@ -11,6 +11,7 @@ type CombinedModelProps = {
     showUnchanged: boolean
     showAdditions: boolean
     showDeletions: boolean
+    onRendered?: () => void
 }
 
 export function CombinedModel({
@@ -20,16 +21,25 @@ export function CombinedModel({
     showUnchanged,
     showAdditions,
     showDeletions,
+    onRendered,
 }: CombinedModelProps) {
     const { theme } = useTheme()
     const commonColor = theme?.colors.fg.muted
     const additionsColor = theme?.colors.success.muted
     const deletionsColor = theme?.colors.danger.muted
+    const [rendered, setRendered] = useState(false)
 
     return (
         <BaseModel boundingSphere={boundingSphere}>
             {/* Unchanged */}
-            <mesh>
+            <mesh
+                onAfterRender={() => {
+                    if (!rendered) {
+                        setRendered(true)
+                        onRendered && onRendered()
+                    }
+                }}
+            >
                 <meshPhongMaterial
                     color={commonColor}
                     transparent