fix video not show and make homepage loading scene

src/pages/components/loadingScene.jsx

@@ -1,21 +1,24 @@
-import { useState, useEffect } from 'react';
 import '../../css/global.css';
 
 function LoadingScene() {
     return (
         <div style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            height: '100vh',
-            maxWidth:"100vw",
             fontSize: '24px',
             color: 'white',
-            backgroundColor: 'black'
+            backgroundColor: 'black',
+            zIndex: 9999 // Ensures it's on top of everything
         }}>
             Loading...
         </div>
     );
 }
 
-export default LoadingScene
+export default LoadingScene;

src/pages/homePage.jsx

@@ -1,8 +1,11 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import '../css/global.css';
 import BlackButton from './components/customButton';
+import LoadingScene from './components/loadingScene';
 
 function HomePage() {
+  const [loading, setLoading] = useState(true); // Track loading state
+
   useEffect(() => {
     const controller = new AbortController();
 
@@ -10,16 +13,17 @@ function HomePage() {
       try {
         const res = await fetch(`${import.meta.env.VITE_ASSETS_URL}/hallway_FFF.mp4`, {
           signal: controller.signal,
-          cache: 'force-cache', // Helps to ensure the response is stored
+          cache: 'force-cache',
         });
 
-        // Read the response into memory (helps trigger caching)
+        await res.blob(); // Read into memory to trigger caching
-        await res.blob();
         console.log('Video prefetched successfully.');
       } catch (err) {
         if (err.name !== 'AbortError') {
           console.error('Video prefetch failed:', err);
         }
+      } finally {
+        setLoading(false); // Done loading either way
       }
     };
 
@@ -28,6 +32,12 @@ function HomePage() {
     return () => controller.abort();
   }, []);
 
+  if (loading) {
+    return (
+      <LoadingScene/>
+    );
+  }
+
   return (
     <div style={{
       display: 'flex',

src/pages/introductionPage.jsx

@@ -51,13 +51,10 @@ function IntroductionPage() {
             {loading ? (
                 <LoadingScene />
             ) : (
-                <div>
                 <IntroductionPageData />
-                    <PlayVideo onVideoReady={handleVideoReady} />
-                </div>
-                
             )}
             
+            <PlayVideo onVideoReady={handleVideoReady} />
         </div>
     );
 }