feat(FR-1685): optimize network requests and loading states for Folder Explorer modal

yomybaby · yomybaby · commit 7137ab8dce6f · 2025-11-17T19:57:57.000+08:00
- Add spinnerLoading prop to BAITable for improved loading UX
- Optimize FileUploadManager to remove unnecessary GraphQL query
- Implement deferred loading and Suspense boundaries in FolderExplorerModal
- Reduce waterfall requests by accepting folder info as parameters
- Improve modal transition performance with optimized fetch policies
diff --git a/packages/backend.ai-ui/src/components/Table/BAITable.tsx b/packages/backend.ai-ui/src/components/Table/BAITable.tsx
@@ -3,7 +3,7 @@ import BAIFlex from '../BAIFlex';
 import BAIUnmountAfterClose from '../BAIUnmountAfterClose';
 import BAIPaginationInfoText from './BAIPaginationInfoText';
 import BAITableSettingModal from './BAITableSettingModal';
-import { SettingOutlined } from '@ant-design/icons';
+import { LoadingOutlined, SettingOutlined } from '@ant-design/icons';
 import { useControllableValue, useDebounce } from 'ahooks';
 import {
   Button,
@@ -171,6 +171,7 @@ export interface BAITableProps<RecordType extends AnyObject>
   tableSettings?: BAITableSettings;
   /** Array of column configurations using BAIColumnType */
   columns?: BAIColumnsType<RecordType>;
+  spinnerLoading?: boolean;
 }
 
 /**
@@ -208,6 +209,7 @@ const BAITable = <RecordType extends object = any>({
   columns,
   components,
   loading,
+  spinnerLoading,
   order,
   onChangeOrder,
   tableSettings,
@@ -327,6 +329,14 @@ const BAITable = <RecordType extends object = any>({
           tableProps.rowSelection?.columnWidth === 0 &&
             styles.zeroWithSelectionColumn,
         )}
+        loading={
+          spinnerLoading
+            ? {
+                indicator: <LoadingOutlined spin />,
+                spinning: true,
+              }
+            : undefined
+        }
         style={{
           opacity: loading ? 0.7 : 1,
           transition: 'opacity 0.3s ease',
diff --git a/packages/backend.ai-ui/src/components/baiClient/FileExplorer/BAIFileExplorer.tsx b/packages/backend.ai-ui/src/components/baiClient/FileExplorer/BAIFileExplorer.tsx
@@ -304,7 +304,7 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
           scroll={{ x: 'max-content' }}
           dataSource={fetchedFilesCache}
           columns={tableColumns}
-          loading={files?.items !== fetchedFilesCache || isFetching}
+          spinnerLoading={files?.items !== fetchedFilesCache || isFetching}
           pagination={false}
           rowSelection={{
             type: 'checkbox',
diff --git a/react/src/components/FileUploadManager.tsx b/react/src/components/FileUploadManager.tsx
@@ -5,7 +5,7 @@ import { RcFile } from 'antd/es/upload';
 import {
   BAIFlex,
   BAILink,
-  toGlobalId,
+  toLocalId,
   useConnectedBAIClient,
 } from 'backend.ai-ui';
 import { atom, useAtom, useSetAtom } from 'jotai';
@@ -14,8 +14,6 @@ import _ from 'lodash';
 import PQueue from 'p-queue';
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { graphql, useLazyLoadQuery } from 'react-relay';
-import { FileUploadManagerQuery } from 'src/__generated__/FileUploadManagerQuery.graphql';
 import { useSuspendedBackendaiClient } from 'src/hooks';
 import { useBAISettingUserState } from 'src/hooks/useBAISetting';
 import * as tus from 'tus-js-client';
@@ -339,29 +337,17 @@ const FileUploadManager: React.FC = () => {
 
 export default FileUploadManager;
 
-export const useFileUploadManager = (vFolderId: string) => {
+export const useFileUploadManager = (id?: string, folderName?: string) => {
   'use memo';
 
   const baiClient = useConnectedBAIClient();
   const { t } = useTranslation();
   const { upsertNotification } = useSetBAINotification();
-  const [uploadStatus, setUploadStatus] = useUploadStatusAtomStatus(vFolderId);
+
   const setUploadRequests = useSetAtom(uploadRequestAtom);
 
-  const { vfolder_node } = useLazyLoadQuery<FileUploadManagerQuery>(
-    graphql`
-      query FileUploadManagerQuery($vfolderGlobalId: String!) {
-        vfolder_node(id: $vfolderGlobalId) {
-          name @required(action: THROW)
-        }
-      }
-    `,
-    {
-      vfolderGlobalId: toGlobalId('VirtualFolderNode', vFolderId),
-    },
-    {
-      fetchPolicy: vFolderId ? 'network-only' : 'store-only',
-    },
+  const [uploadStatus, setUploadStatus] = useUploadStatusAtomStatus(
+    toLocalId(id || ''),
   );
 
   const validateUploadRequest = (
@@ -379,7 +365,7 @@ export const useFileUploadManager = (vFolderId: string) => {
         open: true,
         key: 'upload:' + vfolderId,
         message: t('explorer.UploadFailed', {
-          folderName: vfolder_node?.name ?? '',
+          folderName: folderName ?? '',
         }),
         description: t('data.explorer.FileUploadSizeLimit'),
         duration: 3,
@@ -474,7 +460,7 @@ export const useFileUploadManager = (vFolderId: string) => {
 
     const uploadRequestInfo: UploadRequest = {
       vFolderId: vfolderId,
-      vFolderName: vfolder_node?.name ?? '',
+      vFolderName: folderName ?? '',
       uploadFileInfo: _.zipWith(
         fileToUpload,
         startUploadFunctionMap,
diff --git a/react/src/components/FolderExplorerModal.tsx b/react/src/components/FolderExplorerModal.tsx
@@ -1,7 +1,7 @@
 import { useFileUploadManager } from './FileUploadManager';
 import FolderExplorerHeader from './FolderExplorerHeader';
 import VFolderNodeDescription from './VFolderNodeDescription';
-import { Alert, Divider, Grid, Splitter, theme } from 'antd';
+import { Alert, Divider, Grid, Skeleton, Splitter, theme } from 'antd';
 import { createStyles } from 'antd-style';
 import { RcFile } from 'antd/es/upload';
 import {
@@ -12,7 +12,7 @@ import {
   toGlobalId,
 } from 'backend.ai-ui';
 import _ from 'lodash';
-import { useEffect, useRef } from 'react';
+import { Suspense, useDeferredValue, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 import { FolderExplorerModalQuery } from 'src/__generated__/FolderExplorerModalQuery.graphql';
@@ -54,7 +54,6 @@ const FolderExplorerModal: React.FC<FolderExplorerProps> = ({
   const { xl } = Grid.useBreakpoint();
   const { styles } = useStyles();
   const folderExplorerRef = useRef<FolderExplorerElement>(null);
-  const { uploadStatus, uploadFiles } = useFileUploadManager(vfolderID);
   const [fetchKey, updateFetchKey] = useFetchKey();
   const baiClient = useSuspendedBackendaiClient();
   const currentDomain = useCurrentDomainValue();
@@ -68,12 +67,7 @@ const FolderExplorerModal: React.FC<FolderExplorerProps> = ({
     );
   const bodyRef = useRef<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    if (uploadStatus && _.isEmpty(uploadStatus?.pendingFiles)) {
-      updateFetchKey();
-    }
-  }, [uploadStatus, updateFetchKey]);
-
+  const deferredOpen = useDeferredValue(modalProps.open);
   const { vfolder_node } = useLazyLoadQuery<FolderExplorerModalQuery>(
     graphql`
       query FolderExplorerModalQuery($vfolderGlobalId: String!) {
@@ -82,6 +76,8 @@ const FolderExplorerModal: React.FC<FolderExplorerProps> = ({
           unmanaged_path @since(version: "25.04.0")
           permissions
           host
+          id
+          name
           ...FolderExplorerHeaderFragment
           ...VFolderNodeDescriptionFragment
           ...VFolderNameTitleNodeFragment
@@ -90,9 +86,20 @@ const FolderExplorerModal: React.FC<FolderExplorerProps> = ({
     `,
     { vfolderGlobalId: toGlobalId('VirtualFolderNode', vfolderID) },
     {
-      fetchPolicy: modalProps.open ? 'network-only' : 'store-only',
+      // Only fetch when both deferredOpen and modalProps.open are true to prevent unnecessary requests during React transitions
+      fetchPolicy:
+        deferredOpen && modalProps.open ? 'network-only' : 'store-only',
     },
   );
+  const { uploadStatus, uploadFiles } = useFileUploadManager(
+    vfolder_node?.id,
+    vfolder_node?.name || undefined,
+  );
+  useEffect(() => {
+    if (uploadStatus && _.isEmpty(uploadStatus?.pendingFiles)) {
+      updateFetchKey();
+    }
+  }, [uploadStatus, updateFetchKey]);
 
   const hasDownloadContentPermission = _.includes(
     unitedAllowedPermissionByVolume[vfolder_node?.host ?? ''],
@@ -149,10 +156,16 @@ const FolderExplorerModal: React.FC<FolderExplorerProps> = ({
     <BAIModal
       className={styles.baiModalHeader}
       width={'90%'}
-      centered
       keyboard
       destroyOnHidden
       footer={null}
+      // loading={true}
+      style={{ maxWidth: '1600px' }}
+      styles={{
+        body: {
+          height: '100vh',
+        },
+      }}
       title={
         vfolder_node ? (
           <FolderExplorerHeader
@@ -171,58 +184,69 @@ const FolderExplorerModal: React.FC<FolderExplorerProps> = ({
       }}
       {...modalProps}
     >
-      <BAIFlex direction="column" gap={'lg'} align="stretch">
-        {!vfolder_node ? (
-          <Alert
-            message={t('explorer.FolderNotFoundOrNoAccess')}
-            type="error"
-            showIcon
-          />
-        ) : hasNoPermissions ? (
-          <Alert message={t('explorer.NoPermissions')} type="error" showIcon />
-        ) : currentProject?.id !== vfolder_node?.group &&
-          !!vfolder_node?.group ? (
-          <Alert message={t('data.NotInProject')} type="warning" showIcon />
-        ) : null}
-
-        {xl ? (
-          <Splitter
-            // Force re-render component when xl breakpoint changes to reset panel sizes
-            // This ensures defaultSize is recalculated based on current screen size
-            key={xl ? 'large' : 'small'}
-            style={{
-              gap: token.size,
-              // maxHeight: 'calc(100vh - 220px)',
-            }}
-            layout={xl ? 'horizontal' : 'vertical'}
-          >
-            <Splitter.Panel resizable={false}>
-              {fileExplorerElement}
-            </Splitter.Panel>
-            <Splitter.Panel defaultSize={500}>
-              {vFolderDescriptionElement}
-            </Splitter.Panel>
-          </Splitter>
+      <Suspense fallback={<Skeleton active />}>
+        {/* Use <Skeleton/> instead of using `loading` prop because layout align issue. */}
+        {deferredOpen !== modalProps.open ? (
+          <Skeleton active />
         ) : (
-          <BAIFlex direction="column" align="stretch">
-            {fileExplorerElement}
-            <Divider
-              style={{
-                borderColor: token.colorBorderSecondary,
-              }}
-            />
-            {vFolderDescriptionElement}
+          <BAIFlex direction="column" gap={'lg'} align="stretch">
+            {!vfolder_node ? (
+              <Alert
+                message={t('explorer.FolderNotFoundOrNoAccess')}
+                type="error"
+                showIcon
+              />
+            ) : hasNoPermissions ? (
+              <Alert
+                message={t('explorer.NoPermissions')}
+                type="error"
+                showIcon
+              />
+            ) : currentProject?.id !== vfolder_node?.group &&
+              !!vfolder_node?.group ? (
+              <Alert message={t('data.NotInProject')} type="warning" showIcon />
+            ) : null}
+
+            {xl ? (
+              <Splitter
+                // Force re-render component when xl breakpoint changes to reset panel sizes
+                // This ensures defaultSize is recalculated based on current screen size
+                key={xl ? 'large' : 'small'}
+                style={{
+                  gap: token.size,
+                  // maxHeight: 'calc(100vh - 220px)',
+                }}
+                layout={xl ? 'horizontal' : 'vertical'}
+              >
+                <Splitter.Panel resizable={false}>
+                  {fileExplorerElement}
+                </Splitter.Panel>
+                <Splitter.Panel defaultSize={500}>
+                  {vFolderDescriptionElement}
+                </Splitter.Panel>
+              </Splitter>
+            ) : (
+              <BAIFlex direction="column" align="stretch">
+                {fileExplorerElement}
+                <Divider
+                  style={{
+                    borderColor: token.colorBorderSecondary,
+                  }}
+                />
+                {vFolderDescriptionElement}
+              </BAIFlex>
+            )}
+            <div style={{ display: 'none' }}>
+              {/* @ts-ignore  TODO: delete below after https://lablup.atlassian.net/browse/FR-1150 */}
+              <backend-ai-folder-explorer
+                ref={folderExplorerRef}
+                active
+                vfolderID={vfolderID}
+              />
+            </div>
           </BAIFlex>
         )}
-        <div style={{ display: 'none' }}>
-          {/* @ts-ignore  TODO: delete below after https://lablup.atlassian.net/browse/FR-1150 */}
-          <backend-ai-folder-explorer
-            ref={folderExplorerRef}
-            active
-            vfolderID={vfolderID}
-          />
-        </div>
-      </BAIFlex>
+      </Suspense>
     </BAIModal>
   );
 };
