Hide the view until the scene is initially built (#2894)

* Hide the view until the scene is initially built

* fmt

* Remove log

src/components/Stream.tsx

@@ -8,9 +8,11 @@ import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { ClientSideScene } from 'clientSideScene/ClientSideSceneComp'
 import { butName } from 'lib/cameraControls'
 import { sendSelectEventToEngine } from 'lib/selections'
+import { kclManager } from 'lib/singletons'
 
 export const Stream = () => {
   const [isLoading, setIsLoading] = useState(true)
+  const [isFirstRender, setIsFirstRender] = useState(kclManager.isFirstRender)
   const [clickCoords, setClickCoords] = useState<{ x: number; y: number }>()
   const videoRef = useRef<HTMLVideoElement>(null)
   const { settings } = useSettingsAuthContext()
@@ -53,6 +55,10 @@ export const Stream = () => {
       })
   }, [])
 
+  useEffect(() => {
+    setIsFirstRender(kclManager.isFirstRender)
+  }, [kclManager.isFirstRender])
+
   useEffect(() => {
     if (
       typeof window === 'undefined' ||
@@ -166,10 +172,14 @@ export const Stream = () => {
           </Loading>
         </div>
       )}
-      {isLoading && (
-        <div className="text-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+      {(isLoading || isFirstRender) && (
+        <div className="text-center absolute inset-0">
           <Loading>
-            <span data-testid="loading-stream">Loading stream...</span>
+            {!isLoading && isFirstRender ? (
+              <span data-testid="loading-stream">Building scene...</span>
+            ) : (
+              <span data-testid="loading-stream">Loading stream...</span>
+            )}
           </Loading>
         </div>
       )}