[Task 3] Finish up

task_3_react/src/client/App.tsx

@@ -126,16 +126,21 @@ function App () {
         } );
 
         // Updating fileInfo requires more effort since blob doesn't have the metadata
-        setLoading( false );
         setData( data );
+        setLoading( false );
     };
 
     return (
         <Layout>
+            <div className={'loading-spinner' + ( loading ? ' active' : '' )}>
+                <div aria-busy="true" >
+                    Loading...
+                </div>
+            </div>
             <CSVCard handleChange={handleFileUpload} formRef={formRef}></CSVCard>
             <FileCard fileList={fileList as responseObject} fileChangeHandle={handleFileChange}></FileCard>
             <InfoCard info={info}></InfoCard>
-            <DataTable data={data} loading={loading}></DataTable>
+            <DataTable data={data}></DataTable>
         </Layout>
     );
 }

task_3_react/src/client/components/DataTable.tsx

@@ -8,7 +8,6 @@ import {
 
 const DataTable = ( props: {
     'data': CSV_Data,
-    'loading': boolean
 } ) => {
     if ( props.data.length == 0 ) return <></>;
 
@@ -57,7 +56,7 @@ const DataTable = ( props: {
 
     return (
         <article className="table-container">
-            <header aria-busy={props.loading}>
+            <header>
                 <h2>Data table</h2>
             </header>
             <div className="table-scroll-wrapper">

task_3_react/src/client/css/App.css

@@ -49,8 +49,44 @@ article.wide {
     align-items: center;
     justify-content: center;
     gap: 10px;
-    font-size: 18px;
+    font-size: 1rem;
     cursor: pointer;
+    padding: 5px;
+
+    i {
+        transition: color 0.2s linear;
+
+        &:hover {
+            color: var(--pico-primary-hover);
+        }
+    }
+}
+
+.loading-spinner {
+    display: flex;
+    background-color: rgb(40, 40, 40, 0.3);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    color: white;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    transform: scale(0);
+    transition: transform 0.1s linear;
+
+    &.active {
+        transform: scale(1);
+    }
+
+    div {
+        background-color: rgb(40, 40, 40, 0.6);
+        border-radius: 20px;
+        padding: 30px;
+    }
 }
 
 body>main {