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

* Hide the view until the scene is initially built

* fmt

* Remove log

src/components/FileTree.tsx

@@ -175,7 +175,11 @@ const FileTreeItem = ({
           codeManager.code
       )
       codeManager.writeToFile()
-      kclManager.executeCode(true, true)
+
+      kclManager.isFirstRender = true
+      kclManager.executeCode(true, true).then(() => {
+        kclManager.isFirstRender = false
+      })
     } else {
       // Let the lsp servers know we closed a file.
       onFileClose(currentFile?.path || null, project?.path || null)

src/components/SettingsAuthProvider.tsx

@@ -175,7 +175,12 @@ export const SettingsAuthProviderBase = ({
             id: `${event.type}.success`,
           })
         },
-        'Execute AST': () => kclManager.executeCode(true, true),
+        'Execute AST': () => {
+          kclManager.isFirstRender = true
+          kclManager.executeCode(true, true).then(() => {
+            kclManager.isFirstRender = false
+          })
+        },
       },
       services: {
         'Persist settings': (context) =>

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 && (
+      {(isLoading || isFirstRender) && (
-        <div className="text-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <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>
       )}

src/hooks/useSetupEngineManager.ts

@@ -65,7 +65,10 @@ export function useSetupEngineManager(
         executeCode: () => {
           // We only want to execute the code here that we already have set.
           // Nothing else.
-          return kclManager.executeCode(true, true)
+          kclManager.isFirstRender = true
+          return kclManager.executeCode(true, true).then(() => {
+            kclManager.isFirstRender = false
+          })
         },
         token,
         settings,

src/lang/KclSingleton.ts

@@ -66,6 +66,8 @@ export class KclManager {
   private _wasmInitFailedCallback: (arg: boolean) => void = () => {}
   private _executeCallback: () => void = () => {}
 
+  isFirstRender = true
+
   get ast() {
     return this._ast
   }

src/lib/singletons.ts

@@ -11,6 +11,8 @@ export const engineCommandManager = new EngineCommandManager()
 
 // This needs to be after codeManager is created.
 export const kclManager = new KclManager(engineCommandManager)
+kclManager.isFirstRender = true
+
 engineCommandManager.getAstCb = () => kclManager.ast
 
 export const sceneInfra = new SceneInfra(engineCommandManager)