Franknoirot/video loading (#248)

* Refactor Loading to take children

* Add loading state to stream

src/Auth.tsx

@@ -32,5 +32,9 @@ export const Auth = ({ children }: React.PropsWithChildren) => {
     }
   }, [user, token, navigate, isLoading])
 
-  return isLoading ? <Loading /> : <>{children}</>
+  return isLoading ? (
+    <Loading>Loading KittyCAD Modeling App...</Loading>
+  ) : (
+    <>{children}</>
+  )
 }

src/components/Loading.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-const Loading = () => {
+const Loading = ({ children }: React.PropsWithChildren) => {
   const [hasLongLoadTime, setHasLongLoadTime] = useState(false)
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -23,12 +23,12 @@ const Loading = () => {
           className="animate-spin origin-center"
         />
       </svg>
-      <p className="mt-4 text-liquid-80 dark:text-liquid-20">
-        Loading KittyCAD Modeling App...
+      <p className="text-base mt-4 text-liquid-80 dark:text-liquid-20">
+        {children || 'Loading'}
       </p>
       <p
         className={
-          'mt-4 text-liquid-90 dark:text-liquid-10 transition-opacity duration-500' +
+          'text-sm mt-4 text-liquid-90 dark:text-liquid-10 transition-opacity duration-500' +
           (hasLongLoadTime ? ' opacity-100' : ' opacity-0')
         }
       >

src/components/Stream.tsx

@@ -10,8 +10,10 @@ import { useStore } from '../useStore'
 import { throttle } from '../lib/utils'
 import { EngineCommand } from '../lang/std/engineConnection'
 import { getNormalisedCoordinates } from '../lib/utils'
+import Loading from './Loading'
 
 export const Stream = ({ className = '' }) => {
+  const [isLoading, setIsLoading] = useState(true)
   const [zoom, setZoom] = useState(0)
   const videoRef = useRef<HTMLVideoElement>(null)
   const {
@@ -159,8 +161,14 @@ export const Stream = ({ className = '' }) => {
         onContextMenu={(e) => e.preventDefault()}
         onContextMenuCapture={(e) => e.preventDefault()}
         onWheelCapture={handleScroll}
+        onPlay={() => setIsLoading(false)}
         className="w-full h-full"
       />
+      {isLoading && (
+        <div className="text-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          <Loading>Loading stream...</Loading>
+        </div>
+      )}
     </div>
   )
 }