From 4bffffa9202a828cf51aff4a3d3a37553a662191 Mon Sep 17 00:00:00 2001
From: nguyentrungthat <80239428+nguentrungthat@users.noreply.github.com>
Date: Mon, 9 Feb 2026 11:34:04 +0700
Subject: [PATCH] =?UTF-8?q?Update=20loading=20khi=20m=E1=BB=9Bi=20d=C3=B4?=
 =?UTF-8?q?=20trang?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 BACKEND/providers/socket_io_provider.ts |  5 +++--
 FRONTEND/src/App.tsx                    | 23 ++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/BACKEND/providers/socket_io_provider.ts b/BACKEND/providers/socket_io_provider.ts
index 11079c7..15a434c 100644
--- a/BACKEND/providers/socket_io_provider.ts
+++ b/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()] : [],
     }
diff --git a/FRONTEND/src/App.tsx b/FRONTEND/src/App.tsx
index 46ddf42..c44009f 100644
--- a/FRONTEND/src/App.tsx
+++ b/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"