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) => {