Client: Add showing progress bar during index export

packages/client/src/pages/Home/Section/Header/index.js

@@ -35,7 +35,7 @@ import ShareReactSvgUrl from "PUBLIC_DIR/images/share.react.svg?url";
 import InvitationLinkReactSvgUrl from "PUBLIC_DIR/images/invitation.link.react.svg?url";
 import InfoOutlineReactSvgUrl from "PUBLIC_DIR/images/info.outline.react.svg?url";
 import PersonReactSvgUrl from "PUBLIC_DIR/images/person.react.svg?url";
-import ExportRoomIndexSvgUrl from "PUBLIC_DIR/images/icons/16/export.room.index.svg?url";
+import ExportRoomIndexSvgUrl from "PUBLIC_DIR/images/icons/16/export-room-index.react.svg?url";
 
 import RoomArchiveSvgUrl from "PUBLIC_DIR/images/room.archive.svg?url";
 import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url";

packages/client/src/store/ContextOptionsStore.js

@@ -80,7 +80,7 @@ import FormGalleryReactSvgUrl from "PUBLIC_DIR/images/form.gallery.react.svg?url
 import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";
 import ActionsUploadReactSvgUrl from "PUBLIC_DIR/images/actions.upload.react.svg?url";
 import PluginMoreReactSvgUrl from "PUBLIC_DIR/images/plugin.more.react.svg?url";
-import ExportRoomIndexSvgUrl from "PUBLIC_DIR/images/icons/16/export.room.index.svg?url";
+import ExportRoomIndexSvgUrl from "PUBLIC_DIR/images/icons/16/export-room-index.react.svg?url";
 
 import { getCategoryUrl } from "@docspace/client/src/helpers/utils";
 

packages/client/src/store/FilesActionsStore.js

@@ -79,11 +79,7 @@ import { CategoryType } from "SRC_DIR/helpers/constants";
 import RoomsFilter from "@docspace/shared/api/rooms/filter";
 import AccountsFilter from "@docspace/shared/api/people/filter";
 import { RoomSearchArea, UrlActionType } from "@docspace/shared/enums";
-import {
-  getObjectByLocation,
-  hideLoader,
-  showLoader,
-} from "@docspace/shared/utils/common";
+import { getObjectByLocation } from "@docspace/shared/utils/common";
 import uniqueid from "lodash/uniqueId";
 import FilesFilter from "@docspace/shared/api/files/filter";
 import {
@@ -2768,7 +2764,10 @@ class FilesActionStore {
     });
   };
 
-  loopExportRoomIndexStatusChecking = async () => {
+  loopExportRoomIndexStatusChecking = async (pbData) => {
+    const { setSecondaryProgressBarData } =
+      this.uploadDataStore.secondaryProgressDataStore;
+
     let isCompleted = false;
     let res;
 
@@ -2778,19 +2777,34 @@ class FilesActionStore {
       if (res?.isCompleted) {
         isCompleted = true;
       }
+
+      if (res?.percentage) {
+        setSecondaryProgressBarData({
+          icon: pbData.icon,
+          visible: true,
+          percent: res.percentage,
+          label: "",
+          alert: false,
+          operationId: pbData.operationId,
+        });
+      }
     }
 
     return res;
   };
 
   checkPreviousExportRoomIndexInProgress = async () => {
-    if (this.alreadyExportingRoomIndex) {
-      return true;
+    try {
+      if (this.alreadyExportingRoomIndex) {
+        return true;
+      }
+
+      const previousExport = await api.rooms.getExportRoomIndexProgress();
+
+      return previousExport && !previousExport.isCompleted;
+    } catch (e) {
+      toastr.error(e);
     }
-
-    const previousExport = await api.rooms.getExportRoomIndexProgress();
-
-    return previousExport && !previousExport.isCompleted;
   };
 
   onSuccessExportRoomIndex = (t, fileName, fileUrl) => {
@@ -2801,22 +2815,34 @@ class FilesActionStore {
   };
 
   exportRoomIndex = async (t, roomId) => {
+    const previousExportInProgress =
+      await this.checkPreviousExportRoomIndexInProgress();
+
+    if (previousExportInProgress) {
+      return toastr.error(t("Files:ExportRoomIndexAlreadyInProgressError"));
+    }
+
+    const { setSecondaryProgressBarData, clearSecondaryProgressData } =
+      this.uploadDataStore.secondaryProgressDataStore;
+
+    const pbData = { icon: "exportIndex", operationId: uniqueid("operation_") };
+
+    setSecondaryProgressBarData({
+      icon: pbData.icon,
+      visible: true,
+      percent: 0,
+      label: "",
+      alert: false,
+      operationId: pbData.operationId,
+    });
+
+    this.alreadyExportingRoomIndex = true;
+
     try {
-      showLoader();
-
-      const previousExportInProgress =
-        await this.checkPreviousExportRoomIndexInProgress();
-
-      if (previousExportInProgress) {
-        return toastr.error(t("Files:ExportRoomIndexAlreadyInProgressError"));
-      }
-
-      this.alreadyExportingRoomIndex = true;
-
       let res = await api.rooms.exportRoomIndex(roomId);
 
       if (!res.isCompleted) {
-        res = await this.loopExportRoomIndexStatusChecking();
+        res = await this.loopExportRoomIndexStatusChecking(pbData);
       }
 
       if (res.status === ExportRoomIndexTaskStatus.Failed) {
@@ -2831,7 +2857,8 @@ class FilesActionStore {
       toastr.error(e);
     } finally {
       this.alreadyExportingRoomIndex = false;
-      hideLoader();
+
+      setTimeout(() => clearSecondaryProgressData(pbData.operationId), TIMEOUT);
     }
   };
 }

packages/shared/components/floating-button/FloatingButton.enums.ts

@@ -33,4 +33,5 @@ export const enum FloatingButtonIcons {
   plus = "plus",
   minus = "minus",
   refresh = "refresh",
+  exportIndex = "exportIndex",
 }

packages/shared/components/floating-button/FloatingButton.tsx

@@ -37,6 +37,7 @@ import ButtonPlusIcon from "PUBLIC_DIR/images/icons/16/button.plus.react.svg";
 import ButtonMinusIcon from "PUBLIC_DIR/images/icons/16/button.minus.react.svg";
 import RefreshIcon from "PUBLIC_DIR/images/refresh.react.svg";
 import CloseIcon from "PUBLIC_DIR/images/close-icon.react.svg";
+import ExportRoomIndexIcon from "PUBLIC_DIR/images/icons/16/export-room-index.react.svg";
 
 import { FloatingButtonTheme } from "./FloatingButton.theme";
 
@@ -67,6 +68,7 @@ const icons = {
   minus: <ButtonMinusIcon />,
   refresh: <RefreshIcon />,
   duplicate: <ButtonDuplicateIcon />,
+  exportIndex: <ExportRoomIndexIcon />,
 };
 
 const FloatingButton = (props: FloatingButtonProps) => {