add loading indicator while bulk keyword changes are being processed

Author: jnptk

frontend/packages/volto-keywordmanager/src/components/DeleteModal.tsx

@@ -1,22 +1,34 @@
-import { Button, Modal } from '@plone/components';
+import { Button, Modal, Spinner } from '@plone/components';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { FormattedMessage } from 'react-intl';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import { Dialog } from '@plone/components';
+import { useIntl, defineMessages } from 'react-intl';
 
 interface DeleteModalProps {
+  isLoading: boolean;
   selectionCount: number;
   selectedKeys: string | Set<string>;
   keywords: { items?: { name: string }[] };
   onConfirm: (keys: string[]) => void;
 }
 
+const messages = defineMessages({
+  loading: {
+    id: 'loading',
+    defaultMessage: 'Loading',
+  },
+});
+
 const DeleteModal = ({
+  isLoading,
   selectionCount,
   selectedKeys,
   keywords,
   onConfirm,
 }: DeleteModalProps) => {
+  const intl = useIntl();
+
   return (
     <Modal className="delete-modal">
       <Dialog>
@@ -56,7 +68,11 @@ const DeleteModal = ({
                   close();
                 }}
               >
-                <FormattedMessage id="Delete" defaultMessage="Delete" />
+                {isLoading ? (
+                  <Spinner aria-label={intl.formatMessage(messages.loading)} />
+                ) : (
+                  <FormattedMessage id="Delete" defaultMessage="Delete" />
+                )}
               </Button>
             </div>
           </>

frontend/packages/volto-keywordmanager/src/components/KeywordManager.tsx

@@ -74,6 +74,7 @@ const KeywordManager = (props) => {
   // Sorting
   const [sortOn, setSortOn] = useState<string>('');
   const [sortOrder, setSortOrder] = useState<string>('');
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const options = useMemo(
     () => ({
@@ -113,19 +114,29 @@ const KeywordManager = (props) => {
     if (typeof kw == 'string') {
       kw = [kw];
     }
-    await dispatch(deleteKeywords({ items: kw, indexName: keywordIndex }));
-    await dispatch(getKeywords(options));
+    setIsLoading(true);
+    try {
+      await dispatch(deleteKeywords({ items: kw, indexName: keywordIndex }));
+    } finally {
+      setIsLoading(false);
+    }
+    dispatch(getKeywords(options));
   };
 
   const handleUpdateKeywords = async (kw: string, olds: string[]) => {
-    await dispatch(
-      updateKeywords({
-        new_keyword: kw,
-        old_keywords: olds,
-        indexName: keywordIndex,
-      }),
-    );
-    await dispatch(getKeywords(options));
+    setIsLoading(true);
+    try {
+      await dispatch(
+        updateKeywords({
+          new_keyword: kw,
+          old_keywords: olds,
+          indexName: keywordIndex,
+        }),
+      );
+    } finally {
+      setIsLoading(false);
+    }
+    dispatch(getKeywords(options));
   };
 
   if (keywords?.error?.status) {
@@ -200,6 +211,7 @@ const KeywordManager = (props) => {
                 <Icon name={replaceSVG} size="20px" />
               </Button>
               <RenameModal
+                isLoading={isLoading}
                 selectionCount={selectionCount}
                 selectedKeys={selectedKeys}
                 keywords={keywords}
@@ -217,6 +229,7 @@ const KeywordManager = (props) => {
                 <Icon name={trashSVG} size="20px" />
               </Button>
               <DeleteModal
+                isLoading={isLoading}
                 selectionCount={selectionCount}
                 selectedKeys={selectedKeys}
                 keywords={keywords}

frontend/packages/volto-keywordmanager/src/components/KeywordView.tsx

@@ -18,7 +18,6 @@ import { getVocabulary } from '@plone/volto/actions/vocabularies/vocabularies';
 import backSVG from '@plone/volto/icons/back.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import searchSVG from '@plone/volto/icons/zoom.svg';
-import circleDismissSVG from '@plone/volto/icons/circle-dismiss.svg';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import KeywordList from './KeywordList';
 
@@ -84,6 +83,7 @@ const KeywordView = (props) => {
   const [selectedTypes, setSelectedTypes] = useState<[]>([]);
   const [selectedStates, setSelectedStates] = useState<[]>([]);
   const [search, setSearch] = useState<string>('');
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const options = useMemo(
     () => ({
@@ -124,10 +124,15 @@ const KeywordView = (props) => {
     if (typeof kw == 'string') {
       kw = [kw];
     }
-    await dispatch(
-      deleteKeywords({ items: kw, path: id, indexName: keywordIndex }),
-    );
-    await dispatch(searchContent('/', options, 'keywords'));
+    setIsLoading(true);
+    try {
+      await dispatch(
+        deleteKeywords({ items: kw, path: id, indexName: keywordIndex }),
+      );
+    } finally {
+      setIsLoading(false);
+    }
+    dispatch(searchContent('/', options, 'keywords'));
   };
 
   return (
@@ -178,6 +183,7 @@ const KeywordView = (props) => {
                 <Icon name={trashSVG} size="20px" />
               </Button>
               <DeleteModal
+                isLoading={isLoading}
                 selectionCount={selectionCount}
                 selectedKeys={selectedKeys}
                 keywords={keywords}

frontend/packages/volto-keywordmanager/src/components/RenameModal.tsx

@@ -11,20 +11,32 @@ import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import { Dialog } from '@plone/components';
+import { Spinner } from '@plone/components';
+import { useIntl, defineMessages } from 'react-intl';
 
 interface RenameModalProps {
+  isLoading: boolean;
   selectionCount: number;
   selectedKeys: string | Set<string>;
   keywords: { items?: { name: string }[] };
   onConfirm: (newKeyword: string, oldKeywords: string[]) => void;
 }
 
+const messages = defineMessages({
+  loading: {
+    id: 'loading',
+    defaultMessage: 'Loading',
+  },
+});
+
 const RenameModal = ({
+  isLoading,
   selectionCount,
   selectedKeys,
   keywords,
   onConfirm,
 }: RenameModalProps) => {
+  const intl = useIntl();
   const [selectedRadio, setSelectedRadio] = useState<string>('select');
   const [name, setName] = useState<string | null>(null);
 
@@ -116,10 +128,14 @@ const RenameModal = ({
                   close();
                 }}
               >
-                <FormattedMessage
-                  id="Rename & Merge"
-                  defaultMessage="Rename & Merge"
-                />
+                {isLoading ? (
+                  <Spinner aria-label={intl.formatMessage(messages.loading)} />
+                ) : (
+                  <FormattedMessage
+                    id="Rename & Merge"
+                    defaultMessage="Rename & Merge"
+                  />
+                )}
               </Button>
             </div>
           </>