Update loading khi mới dô trang

BACKEND/providers/socket_io_provider.ts

@@ -132,9 +132,10 @@ export class WebSocketIo {
       }, 500)
 
       setTimeout(() => {
+        const listLine = Array.from(this.lineMap.values())
         io.to(socket.id).emit(
           'init',
-          Array.from(this.lineMap.values()).map((el) => {
+          listLine.map((el) => {
             const config = el?.config || {}
             if (config.status !== 'connected') {
               config.runningScenario = ''
@@ -1120,11 +1121,11 @@ export class WebSocketIo {
             userOpenCLI: '',
             openCLI: false,
             listFeatureTested: [''],
+            output: line.config.output.slice(0, 5000) || '',
           },
         } as LineConnection)
       }
     })
-
     const data = {
       lineMap: newMap ? [...newMap.entries()] : [],
     }

FRONTEND/src/App.tsx

@@ -22,6 +22,8 @@ import {
   Grid,
   ScrollArea,
   LoadingOverlay,
+  Loader,
+  Box,
 } from "@mantine/core";
 import type {
   FileInfo,
@@ -106,6 +108,7 @@ function App() {
   const [listCategories, setListCategories] = useState<TCategories[]>([]);
   const [listIos, setListIos] = useState<FileInfo[]>([]);
   const [listLicense, setListLicense] = useState<FileInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
 
   const connectApcSwitch = (station: TStation) => {
     if (!station?.is_active) return;
@@ -227,6 +230,12 @@ function App() {
     getListLicense();
   }, [socket]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 3000);
+  }, [socket]);
+
   useEffect(() => {
     if (!socket || !stations?.length) return;
 
@@ -640,7 +649,19 @@ function App() {
                     style={{ overflowX: "hidden" }}
                     className={componentClasses.hideScrollBar}
                   >
-                    {station.lines.length > 0 ? (
+                    {isLoading ? (
+                      <Box
+                        style={{
+                          height: "15vh",
+                          width: "100%",
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "center",
+                        }}
+                      >
+                        <Loader color="blue" />
+                      </Box>
+                    ) : station.lines.length > 0 ? (
                       station.lines.length < 9 ? (
                         <Grid
                           gutter="md"