From 3412c1fd690d919f33cd299150d2665cc40df229 Mon Sep 17 00:00:00 2001
From: Pierre Jacquier <pierrejacquier39@gmail.com>
Date: Fri, 14 Jul 2023 06:40:55 -0400
Subject: [PATCH] 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              |  7 ++++++-
 src/components/viewer/CadDiff.tsx       |  8 ++++++++
 src/components/viewer/CombinedModel.tsx | 14 ++++++++++++--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index fb494fa..09f79e5 100644
--- a/src/components/Loading.tsx
+++ b/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>
diff --git a/src/components/viewer/CadDiff.tsx b/src/components/viewer/CadDiff.tsx
index 511b06b..564b453 100644
--- a/src/components/viewer/CadDiff.tsx
+++ b/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>
diff --git a/src/components/viewer/CombinedModel.tsx b/src/components/viewer/CombinedModel.tsx
index dd2450c..7f17e89 100644
--- a/src/components/viewer/CombinedModel.tsx
+++ b/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