test

src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js

@@ -23,12 +23,14 @@ export const BulkEditInAppLayer = ({
 
   const {
     isPreviewModalOpened,
-    isPreviewLoading,
     bulkDetails,
     totalRecords,
     downloadFile,
     confirmChanges,
     closePreviewModal,
+    isPreviewLoading,
+    setIsPreviewLoading,
+    isReadyToShowPreview,
   } = useConfirmChanges({
     queryDownloadKey: QUERY_KEY_DOWNLOAD_PREVIEW_MODAL,
     updateFn: contentUpdate,
@@ -60,6 +62,10 @@ export const BulkEditInAppLayer = ({
     confirmChanges({ contentUpdates: contentUpdatesBody });
   };
 
+  const handlePreviewLoaded = () => {
+    setIsPreviewLoading(false);
+  };
+
   return (
     <>
       <BulkEditLayer
@@ -76,11 +82,13 @@ export const BulkEditInAppLayer = ({
 
       <BulkEditPreviewModal
         isPreviewLoading={isPreviewLoading}
+        isReadyToShowPreview={isReadyToShowPreview}
         bulkDetails={bulkDetails}
         open={isPreviewModalOpened}
         onDownload={downloadFile}
         onKeepEditing={closePreviewModal}
         onChangesCommited={handleChangesCommited}
+        onPreviewLoaded={handlePreviewLoaded}
       />
     </>
   );

src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js

@@ -24,7 +24,9 @@ export const BulkEditPreviewModal = ({
   open,
   bulkDetails,
   isPreviewLoading,
+  isReadyToShowPreview,
   onKeepEditing,
+  onPreviewLoaded,
   onDownload,
   onChangesCommited,
 }) => {
@@ -89,18 +91,21 @@ export const BulkEditPreviewModal = ({
     >
       <BulkEditPreviewModalList
         bulkDetails={bulkDetails}
-        isPreviewEnabled={!isPreviewLoading}
         onPreviewError={onKeepEditing}
+        onPreviewLoaded={onPreviewLoaded}
+        isReadyToShowPreview={isReadyToShowPreview}
       />
     </Modal>
   );
 };
 
 BulkEditPreviewModal.propTypes = {
   open: PropTypes.bool,
+  isReadyToShowPreview: PropTypes.bool,
   isPreviewLoading: PropTypes.bool,
   bulkDetails: PropTypes.object,
   onKeepEditing: PropTypes.func,
+  onPreviewLoaded: PropTypes.func,
   onChangesCommited: PropTypes.func,
   onDownload: PropTypes.func,
 };

src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js

@@ -6,8 +6,6 @@ import {
 } from 'react-intl';
 
 import {
-  Layout,
-  Loading,
   MessageBanner,
   MultiColumnList
 } from '@folio/stripes/components';
@@ -23,7 +21,6 @@ import { usePagination } from '../../../../hooks/usePagination';
 import {
   CAPABILITIES,
   EDITING_STEPS,
-  JOB_STATUSES,
   PAGINATION_CONFIG
 } from '../../../../constants';
 import {
@@ -38,8 +35,9 @@ import { useErrorMessages } from '../../../../hooks/useErrorMessages';
 
 export const BulkEditPreviewModalList = ({
   bulkDetails,
-  isPreviewEnabled,
+  isReadyToShowPreview,
   onPreviewError,
+  onPreviewLoaded,
 }) => {
   const callout = useShowCallout();
   const intl = useIntl();
@@ -63,8 +61,11 @@ export const BulkEditPreviewModalList = ({
     step: EDITING_STEPS.EDIT,
     capabilities: currentRecordType,
     queryOptions: {
-      enabled: isPreviewEnabled && bulkDetails?.status !== JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS,
-      onSuccess: showErrorMessage,
+      enabled: !!bulkDetails?.id && isReadyToShowPreview,
+      onSuccess: (response) => {
+        showErrorMessage(response);
+        onPreviewLoaded(response);
+      },
       onError: () => {
         callout({
           type: 'error',
@@ -76,7 +77,7 @@ export const BulkEditPreviewModalList = ({
     ...pagination,
   });
 
-  if (!contentData || !isPreviewEnabled) return <Preloader />;
+  if (!contentData?.length) return <Preloader />;
 
   const renderMessageBanner = () => {
     if (!bulkDetails?.processedNumOfRecords && currentRecordType === CAPABILITIES.INSTANCE) {
@@ -95,46 +96,41 @@ export const BulkEditPreviewModalList = ({
   };
 
   return (
-    bulkDetails?.status !== JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS ?
-      (
-        <>
-          {renderMessageBanner()}
+    <>
+      {renderMessageBanner()}
 
-          <strong className={css.previewModalSubtitle}><FormattedMessage
-            id="ui-bulk-edit.previewModal.previewToBeChanged"
-          />
-          </strong>
+      <strong className={css.previewModalSubtitle}><FormattedMessage
+        id="ui-bulk-edit.previewModal.previewToBeChanged"
+      />
+      </strong>
 
-          <MultiColumnList
-            striped
-            contentData={contentData}
-            columnMapping={columnMapping}
-            visibleColumns={visibleColumnKeys}
-            maxHeight={300}
-            columnIdPrefix="in-app"
-            columnWidths={PREVIEW_COLUMN_WIDTHS}
-            loading={isFetching}
-          />
+      <MultiColumnList
+        striped
+        contentData={contentData}
+        columnMapping={columnMapping}
+        visibleColumns={visibleColumnKeys}
+        maxHeight={300}
+        columnIdPrefix="in-app"
+        columnWidths={PREVIEW_COLUMN_WIDTHS}
+        loading={isFetching}
+      />
 
-          {contentData.length > 0 && (
-          <PrevNextPagination
-            {...pagination}
-            totalCount={bulkDetails?.processedNumOfRecords}
-            disabled={false}
-            onChange={changePage}
-          />
-          )}
-        </>
-      )
-      :
-        <Layout className="flex centerContent">
-          <Loading size="large" />
-        </Layout>
+      {contentData.length > 0 && (
+      <PrevNextPagination
+        {...pagination}
+        totalCount={bulkDetails?.processedNumOfRecords}
+        disabled={false}
+        onChange={changePage}
+      />
+      )}
+    </>
   );
 };
 
 BulkEditPreviewModalList.propTypes = {
   bulkDetails: PropTypes.object,
   isPreviewEnabled: PropTypes.bool,
+  isReadyToShowPreview: PropTypes.bool,
   onPreviewError: PropTypes.func,
+  onPreviewLoaded: PropTypes.func,
 };

src/components/BulkEditPane/BulkEditMarkLayer/BulkEditMarkLayer.js

@@ -30,6 +30,8 @@ export const BulkEditMarkLayer = ({
     downloadFile,
     confirmChanges,
     closePreviewModal,
+    setIsPreviewLoading,
+    isReadyToShowPreview,
   } = useConfirmChanges({
     updateFn: markContentUpdate,
     queryDownloadKey: QUERY_KEY_DOWNLOAD_MARK_PREVIEW_MODAL,
@@ -64,6 +66,10 @@ export const BulkEditMarkLayer = ({
     });
   };
 
+  const handlePreviewLoaded = () => {
+    setIsPreviewLoading(false);
+  };
+
   return (
     <>
       <BulkEditLayer
@@ -78,11 +84,13 @@ export const BulkEditMarkLayer = ({
 
       <BulkEditPreviewModal
         isPreviewLoading={isPreviewLoading}
+        isReadyToShowPreview={isReadyToShowPreview}
         bulkDetails={bulkDetails}
         open={isPreviewModalOpened}
         onDownload={downloadFile}
         onKeepEditing={closePreviewModal}
         onChangesCommited={handleChangesCommited}
+        onPreviewLoaded={handlePreviewLoaded}
       />
     </>
   );

src/hooks/api/useBulkOperationDetails.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useNamespace, useOkapiKy } from '@folio/stripes/core';
 import { useHistory } from 'react-router-dom';
@@ -10,14 +10,14 @@ export const BULK_OPERATION_DETAILS_KEY = 'BULK_OPERATION_DETAILS_KEY';
 
 export const useBulkOperationDetails = ({
   id,
-  interval = 0,
+  interval,
   additionalQueryKeys = [],
   ...options
 }) => {
   const ky = useOkapiKy();
   const [namespaceKey] = useNamespace({ key: BULK_OPERATION_DETAILS_KEY });
   const history = useHistory();
-  const [refetchInterval, setRefetchInterval] = useState(interval);
+  const [refetchInterval, setRefetchInterval] = useState(0);
   const { showErrorMessage } = useErrorMessages();
 
   const clearInterval = () => {
@@ -58,6 +58,10 @@ export const useBulkOperationDetails = ({
     ...options,
   });
 
+  useEffect(() => {
+    setRefetchInterval(interval);
+  }, [interval]);
+
   return {
     bulkDetails: data,
     isLoading,

src/hooks/api/useBulkOperationStart.js

@@ -71,7 +71,6 @@ export const useBulkOperationStart = (mutationOptions = {}) => {
 
       return data;
     },
-    onSuccess: showErrorMessage,
     onError: showErrorMessage,
     ...mutationOptions,
   });

src/hooks/useConfirmChanges.js

@@ -15,6 +15,7 @@ import {
   APPROACHES,
   EDITING_STEPS,
   FILE_SEARCH_PARAMS,
+  JOB_STATUSES,
 } from '../constants';
 import { useSearchParams } from './useSearchParams';
 
@@ -31,9 +32,13 @@ export const useConfirmChanges = ({
   const searchParams = useSearchParams();
 
   const [isPreviewModalOpened, setIsPreviewModalOpened] = useState(false);
+  const [isBulkOperationStarting, setIsBulkOperationStarting] = useState(false);
   const [isPreviewLoading, setIsPreviewLoading] = useState(false);
 
-  const { bulkDetails } = useBulkOperationDetails({ id: bulkOperationId, interval: 1000 * 3 });
+  const { bulkDetails } = useBulkOperationDetails({
+    id: bulkOperationId,
+    interval: isPreviewLoading ? 3000 : 0
+  });
   const { bulkOperationStart } = useBulkOperationStart();
 
   const totalRecords = bulkDetails?.totalNumOfRecords;
@@ -44,9 +49,11 @@ export const useConfirmChanges = ({
 
   const closePreviewModal = () => {
     setIsPreviewModalOpened(false);
+    setIsPreviewLoading(false);
   };
 
   const confirmChanges = (payload) => {
+    setIsBulkOperationStarting(true);
     setIsPreviewLoading(true);
     setIsPreviewModalOpened(true);
 
@@ -69,7 +76,7 @@ export const useConfirmChanges = ({
         closePreviewModal();
       })
       .finally(() => {
-        setIsPreviewLoading(false);
+        setIsBulkOperationStarting(false);
       });
   };
 
@@ -83,10 +90,16 @@ export const useConfirmChanges = ({
     onSuccess: (data) => onDownloadSuccess(data, searchParams),
   });
 
+  const isReadyToShowPreview = !isBulkOperationStarting &&
+    ![JOB_STATUSES.DATA_MODIFICATION, JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS].includes(bulkDetails?.status);
+
   return {
     totalRecords,
     bulkDetails,
     isPreviewModalOpened,
+    isBulkOperationStarting,
+    setIsBulkOperationStarting,
+    isReadyToShowPreview,
     isPreviewLoading,
     setIsPreviewLoading,
     isFileDownloading,