fix: set loadingWatch state when the loading begins

src/hooks/use-chunk-request.ts

@@ -50,7 +50,7 @@ export const sliceData = (data: string, loaded: number, loadedSize: any) => {
 
 const useSetChunkRequest = () => {
   const watchRequestList = window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList;
-  const [requestReadyState, setRequestReadyState] = useState(3);
+  const [requestReadyState, setRequestReadyState] = useState(0);
   const axiosToken = useRef<any>(null);
   const requestConfig = useRef<any>({});
   const loaded = useRef(0);
@@ -61,12 +61,13 @@ const useSetChunkRequest = () => {
   const timer = useRef<any>(null);
   const loadedSize = useRef(0);
   const workerRef = useRef<any>(null);
+  const startLoadingRef = useRef(false);
 
   const reset = () => {
     loaded.current = 0;
     total.current = 0;
     loadedSize.current = 0;
-    setRequestReadyState(3);
+    setRequestReadyState(0);
   };
 
   const createAxiosToken = () => {
@@ -169,6 +170,7 @@ const useSetChunkRequest = () => {
   const setChunkRequest = (config: RequestConfig) => {
     requestConfig.current = { ...particalConfig, ...config };
     retryCount.current = totalCount;
+    startLoadingRef.current = false;
     clearTimeout(timer.current);
     axiosChunkRequest(requestConfig.current);
     return axiosToken;
@@ -201,11 +203,17 @@ const useSetChunkRequest = () => {
         2 ** (totalCount - retryCount.current) * 1000
       );
     }
+    if (requestReadyState === 3) {
+      setTimeout(() => {
+        startLoadingRef.current = true;
+      }, 5000);
+    }
   }, [requestReadyState]);
 
   return {
     setChunkRequest,
-    createAxiosToken
+    createAxiosToken,
+    startLoadingRef
   };
 };
 

src/hooks/use-table-fetch.ts

@@ -62,7 +62,7 @@ export default function useTableFetch<T>(
   const modalRef = useRef<any>(null);
   const rowSelection = useTableRowSelection();
   const { sortOrder, handleMultiSortChange } = useTableMultiSort();
-  const axiosTokenRef = useRef<string | null>(null);
+  const axiosTokenRef = useRef<any>(null);
 
   // ======= to resolve worker upate issue =======
   const shouldUpdateRef = useRef(false);
@@ -134,10 +134,10 @@ export default function useTableFetch<T>(
       currentWatchParamsRef.current = {
         query: { ...params }
       };
-      axiosTokenRef.current?.cancel?.();
+      axiosTokenRef.current?.cancel?.('CANCEL_PREVIOUS_REQUEST');
       axiosTokenRef.current = createAxiosToken();
       const res = await fetchAPI(params, {
-        token: axiosTokenRef.current.token
+        token: axiosTokenRef.current?.token
       });
       shouldUpdateRef.current = false;
       loadendRef.current = true;
@@ -160,7 +160,7 @@ export default function useTableFetch<T>(
           query: { ...newParams }
         };
         const newRes = await fetchAPI(newParams, {
-          token: axiosTokenRef.current.token
+          token: axiosTokenRef.current?.token
         });
 
         setDataSource({
@@ -194,15 +194,17 @@ export default function useTableFetch<T>(
           ...query
         });
       }
-    } catch (error) {
-      console.log('error', error);
-      setDataSource({
-        dataList: [],
-        loading: false,
-        loadend: true,
-        total: dataSource.total,
-        totalPage: dataSource.totalPage
-      });
+    } catch (error: any) {
+      if (error.message !== 'CANCEL_PREVIOUS_REQUEST') {
+        setDataSource({
+          dataList: [],
+          loading: false,
+          loadend: true,
+          total: dataSource.total,
+          totalPage: dataSource.totalPage
+        });
+      }
+
       loadendRef.current = true;
       shouldUpdateRef.current = false;
     } finally {

src/hooks/use-update-chunk-list.ts

@@ -45,7 +45,7 @@ export function useUpdateChunkedList(options: {
     }, 200);
   };
   const updateChunkedList = (data: ChunkedCollection) => {
-    console.log('updateChunkedList data:', data);
+    // console.log('updateChunkedList data:', data);
     let collections = data?.collection || [];
     if (options?.computedID) {
       collections = collections?.map((item: any) => {

src/pages/cluster-management/hooks/use-add-worker-message.ts

@@ -8,7 +8,6 @@ export default function useAddWorkerMessage() {
   const chunkRequestRef = useRef<any>(null);
   const newItemsRef = useRef<any[]>([]);
   const [addedCount, setAddedCount] = useState(0);
-  const startWatchRef = useRef(false);
   const timerRef = useRef<any>(null);
 
   const showAddWorkerMessage = () => {
@@ -18,12 +17,12 @@ export default function useAddWorkerMessage() {
     }
   };
 
-  const { setChunkRequest } = useSetChunkRequest();
+  const { setChunkRequest, startLoadingRef } = useSetChunkRequest();
   const { updateChunkedList } = useUpdateChunkedList({
     events: ['CREATE', 'INSERT'],
     dataList: [],
     onCreate: (newItems: any) => {
-      if (startWatchRef.current) {
+      if (startLoadingRef.current) {
         newItemsRef.current = newItemsRef.current.concat(newItems);
         showAddWorkerMessage();
       }
@@ -39,7 +38,6 @@ export default function useAddWorkerMessage() {
   const resetAddedCount = () => {
     setAddedCount(0);
     newItemsRef.current = [];
-    startWatchRef.current = false;
     clearTimeout(timerRef.current);
   };
 
@@ -51,9 +49,6 @@ export default function useAddWorkerMessage() {
         url: WORKERS_API,
         handler: updateHandler
       });
-      timerRef.current = setTimeout(() => {
-        startWatchRef.current = true;
-      }, 5000);
     } catch (error) {
       // ignore
     }
@@ -62,7 +57,6 @@ export default function useAddWorkerMessage() {
   useEffect(() => {
     return () => {
       chunkRequestRef.current?.current?.cancel?.();
-      startWatchRef.current = false;
       newItemsRef.current = [];
       clearTimeout(timerRef.current);
     };

src/pages/resources/apis/index.ts

@@ -54,10 +54,14 @@ export async function queryWorkersList<T extends Record<string, any>>(
   });
 }
 
-export async function queryGpuDevicesList(params: Global.SearchParams) {
+export async function queryGpuDevicesList(
+  params: Global.SearchParams,
+  options?: { token: any }
+) {
   return request<Global.PageResponse<GPUDeviceItem>>(`${GPU_DEVICES_API}`, {
     method: 'GET',
-    params
+    params,
+    cancelToken: options?.token
   });
 }