@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/containers/StructuredData/actions.tsx

@@ -427,9 +427,9 @@ function deleteStructuredDataContent(
 			};
 
 			const callback = async () =>
-				Array.isArray(id) ? structuredData.deleteDataContentBulk(id) : structuredData.deleteDataContent(id);
+				Array.isArray(id) ? await structuredData.deleteDataContentBulk(id) : await structuredData.deleteDataContent(id);
 
-			return await handleRequest(callback, responseActions, [setIsLoading])(dispatch);
+			return await handleRequest(callback, responseActions, [setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -662,7 +662,7 @@ function createCategoryGroup(
 
 			const callback = async () => structuredData.createGroup(dataGroup);
 
-			return await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -680,7 +680,7 @@ function updateCategoryGroup(groupID: number, data: ICategoryGroupParams): (disp
 
 			const callback = async () => structuredData.updateGroup(groupID, data);
 
-			return await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -723,7 +723,7 @@ function deleteCategoryGroup(
 					? structuredData.deleteGroupBulk(currentStructuredData.id, siteID, id, deleteChildren)
 					: structuredData.deleteGroup(currentStructuredData.id, siteID, id, deleteChildren);
 
-			return await handleRequest(callback, responseActions, [setIsLoading])(dispatch);
+			return await handleRequest(callback, responseActions, [setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;

package/src/containers/Users/actions.tsx

@@ -219,7 +219,7 @@ function deleteUser(id: number | number[]): (dispatch: Dispatch, getState: () =>
 
 			const callback = async () => (Array.isArray(id) ? users.deleteUserBulk(id) : users.deleteUser(id));
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -255,7 +255,7 @@ function removeUserFromSite(userID: number, siteID: number): (dispatch: Dispatch
 
 			const callback = async () => users.removeUserFromSite(userID, siteID);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;

package/src/modules/Categories/CategoriesList/CategoryItem/index.tsx

@@ -6,7 +6,7 @@ import { structuredData } from "@ax/api";
 import { CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tag, TruncatedTooltip } from "@ax/components";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { isReqOk } from "@ax/helpers";
-import { useModal, usePermission } from "@ax/hooks";
+import { useModals, usePermissions } from "@ax/hooks";
 import type { ICategoryGroup, ICheck, IDataLanguage, ILanguage, IRootState, IStructuredDataCategory } from "@ax/types";
 
 import { type AnimateLayoutChanges, useSortable } from "@dnd-kit/sortable";
@@ -34,12 +34,11 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 		depth,
 		indentationWidth,
 		collapsed,
+		isSaving,
 		onCollapse,
 	} = props;
 
-	const { isOpen, toggleModal } = useModal();
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isGroupOpen, toggleModal: toggleGroupModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["panel", "delete", "group"]);
 	const [deleteGroupCategories, setDeleteGroupCategories] = useState(false);
 	const [translation, setTranslation] = useState<{
 		lang: { locale: string; id: number };
@@ -47,12 +46,14 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 		content: IStructuredDataCategory | ICategoryGroup | null;
 	} | null>(null);
 
-	const allowedToEditSiteCategory = usePermission("categories.editSiteTaxonomies");
-	const allowedToEditGlobalCategory = usePermission("global.globalData.editTaxonomies");
-	const allowedToDeleteSiteCategory = usePermission("categories.deleteSiteTaxonomies");
-	const allowedToDeleteGlobalCategory = usePermission("global.globalData.deleteTaxonomies");
-	const allowedToEditTaxonomy = currentSiteID ? allowedToEditSiteCategory : allowedToEditGlobalCategory;
-	const allowedToDeleteTaxonomy = currentSiteID ? allowedToDeleteSiteCategory : allowedToDeleteGlobalCategory;
+	const isAllowedTo = usePermissions({
+		editSiteCategory: "categories.editSiteTaxonomies",
+		editGlobalCategory: "global.globalData.editTaxonomies",
+		deleteSiteCategory: "categories.deleteSiteTaxonomies",
+		deleteGlobalCategory: "global.globalData.deleteTaxonomies",
+	});
+	const allowedToEditTaxonomy = currentSiteID ? isAllowedTo.editSiteCategory : isAllowedTo.editGlobalCategory;
+	const allowedToDeleteTaxonomy = currentSiteID ? isAllowedTo.deleteSiteCategory : isAllowedTo.deleteGlobalCategory;
 
 	const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) => !(isSorting || wasDragging);
 
@@ -66,11 +67,11 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 	const { dataLanguages = [], content } = category;
 	const isGroup = category.type === "group";
 
-	const handleClick = () => !isDragging && toggleModal();
+	const handleClick = () => !isDragging && toggleModal("panel");
 
 	const handleCloseModal = () => {
 		setTranslation(null);
-		toggleModal();
+		toggleModal("panel");
 	};
 
 	const handleOnChange = (value: ICheck) => onChange(value);
@@ -82,7 +83,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 		const deleted = await deleteStructuredDataContent(categoryIDs);
 
 		if (deleted) {
-			isDeleteOpen && toggleDeleteModal();
+			isOpen("delete") && toggleModal("delete");
 			toggleToast("1 category deleted");
 		}
 	};
@@ -93,7 +94,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 		const deleted = await deleteCategoryGroup(categoryIDs, deleteGroupCategories);
 
 		if (deleted) {
-			isGroupOpen && toggleGroupModal();
+			isOpen("group") && toggleModal("group");
 			toggleToast(
 				deleteGroupCategories ? "1 grouping category and its categories deleted" : "1 grouping category deleted",
 			);
@@ -105,7 +106,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 				{
 					label: "delete",
 					icon: "delete",
-					action: isGroup ? toggleGroupModal : toggleDeleteModal,
+					action: isGroup ? () => toggleModal("group") : () => toggleModal("delete"),
 				},
 			]
 		: [];
@@ -154,7 +155,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 			content = await getDataTranslation(translationLang?.id || category.id, lang.id, category.type);
 		}
 		setTranslation({ lang, isNew, content });
-		toggleModal();
+		toggleModal("panel");
 	};
 
 	const languageMenu = () => (
@@ -181,20 +182,6 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 		"Not translatable"
 	);
 
-	const mainDeleteModalAction = {
-		title: "delete",
-		onClick: removeCategory,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const mainDeleteGroupModalAction = {
-		title: "Delete",
-		onClick: removeGroup,
-	};
-
-	const secondaryDeleteGroupModalAction = { title: "Cancel", onClick: toggleGroupModal };
-
 	const selectable = !(isCategoryGroup(category) && category.selectable === false);
 
 	return (
@@ -236,7 +223,11 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 						</TruncatedTooltip>
 					</S.NameCell>
 					<S.CodeCell role="cell" clickable={allowedToEditTaxonomy}>
-						<TruncatedTooltip content={isCategory(category) && category.content ? category.content.code : ""} expanded top={-5}>
+						<TruncatedTooltip
+							content={isCategory(category) && category.content ? category.content.code : ""}
+							expanded
+							top={-5}
+						>
 							<S.Code>{isCategory(category) && category.content ? category.content.code : ""}</S.Code>
 						</TruncatedTooltip>
 					</S.CodeCell>
@@ -254,9 +245,9 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 					</S.ActionsCell>
 				</S.CategoryRow>
 			</S.Wrapper>
-			{isOpen && (
+			{isOpen("panel") && (
 				<CategoryPanel
-					isOpen={isOpen}
+					isOpen={isOpen("panel")}
 					toggleModal={handleCloseModal}
 					item={translation?.content || category}
 					getContents={getContents}
@@ -264,22 +255,22 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 					toggleToast={toggleToast}
 				/>
 			)}
-			{isDeleteOpen && (
+			{isOpen("delete") && (
 				<DeleteModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
+					onDelete={removeCategory}
+					isLoading={isSaving}
 				/>
 			)}
-			{isGroupOpen && (
+			{isOpen("group") && (
 				<DeleteGroupModal
-					isOpen={isGroupOpen}
-					toggleModal={toggleGroupModal}
-					mainModalAction={mainDeleteGroupModalAction}
-					secondaryModalAction={secondaryDeleteGroupModalAction}
+					isOpen={isOpen("group")}
+					toggleModal={() => toggleModal("group")}
+					onDelete={removeGroup}
 					deleteGroupCategories={deleteGroupCategories}
 					setDeleteGroupCategories={setDeleteGroupCategories}
+					isLoading={isSaving}
 				/>
 			)}
 		</>
@@ -300,6 +291,7 @@ interface IProps {
 	depth: number;
 	indentationWidth: number;
 	collapsed: boolean;
+	isSaving: boolean;
 	onCollapse?: () => void;
 }
 
@@ -312,6 +304,7 @@ type ICategoryItemProps = IProps & IDispatchProps;
 
 const mapStateToProps = (state: IRootState) => ({
 	currentSiteID: state.sites.currentSiteInfo?.id ?? null,
+	isSaving: state.app.isSaving,
 });
 
 const mapDispatchToProps = {

package/src/modules/Categories/CategoriesList/CategoryPanel/index.tsx

@@ -1,17 +1,18 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 
+import { Button, Flag, FloatingPanel } from "@ax/components";
 import { structuredDataActions } from "@ax/containers/StructuredData";
-import {
+import type {
+	ICategoryGroup,
+	ICategoryGroupParams,
+	ILanguage,
 	IRootState,
 	IStructuredData,
-	IStructuredDataContent,
-	ILanguage,
 	IStructuredDataCategory,
-	ICategoryGroup,
-	ICategoryGroupParams,
+	IStructuredDataContent,
 } from "@ax/types";
-import { Button, Flag, FloatingPanel } from "@ax/components";
+
 import { isCategory, isCategoryGroup } from "../utils";
 import Form from "./Form";
 
@@ -31,6 +32,7 @@ const CategoryPanel = (props: IProps): JSX.Element => {
 		currentStructuredData,
 		languages,
 		translation,
+		isSaving,
 	} = props;
 
 	const initState: IFormState = {
@@ -117,15 +119,15 @@ const CategoryPanel = (props: IProps): JSX.Element => {
 	};
 
 	const addButton = {
-		label: "Add",
+		label: isSaving ? "Saving" : "Add",
 		action: addItemAction,
-		disabled: false,
+		disabled: isSaving,
 	};
 
 	const editButton = {
-		label: "Update",
+		label: isSaving ? "Saving" : "Update",
 		action: editItemAction,
-		disabled: false,
+		disabled: isSaving,
 	};
 
 	const translateTitle = translation?.isNew ? "Translate" : "Edit";
@@ -172,6 +174,7 @@ const CategoryPanel = (props: IProps): JSX.Element => {
 interface IStateProps {
 	currentStructuredData: IStructuredData | null;
 	languages: ILanguage[];
+	isSaving: boolean;
 }
 
 interface ICategoryPanelProps {
@@ -193,6 +196,7 @@ export interface IFormState {
 const mapStateToProps = (state: IRootState) => ({
 	currentStructuredData: state.structuredData.currentStructuredData,
 	languages: state.app.globalLangs,
+	isSaving: state.app.isSaving,
 });
 
 const mapDispatchToProps = {

package/src/modules/Categories/CategoriesList/atoms.tsx

@@ -1,12 +1,29 @@
-import React from "react";
+import type React from "react";
 
-import { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
+import { FieldsBehavior, Modal } from "@ax/components";
 
 import * as S from "./style";
 
-const DeleteModal = (props: IModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction } = props;
+interface IDeleteModal {
+	isOpen: boolean;
+	toggleModal: () => void;
+	onDelete: () => void;
+	isLoading?: boolean;
+}
+
+const DeleteModal = (props: IDeleteModal): JSX.Element => {
+	const { isOpen, toggleModal, onDelete, isLoading = false } = props;
+
+	const mainModalAction = {
+		title: isLoading ? "deleting" : "delete",
+		onClick: onDelete,
+		disabled: isLoading,
+	};
+
+	const secondaryModalAction = {
+		title: "Cancel",
+		onClick: toggleModal,
+	};
 
 	return (
 		<Modal
@@ -16,6 +33,7 @@ const DeleteModal = (props: IModal): JSX.Element => {
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
+			height="auto"
 		>
 			<S.ModalContent>
 				<p>
@@ -29,16 +47,32 @@ const DeleteModal = (props: IModal): JSX.Element => {
 	);
 };
 
+interface IDeleteGroupModal extends IDeleteModal {
+	deleteGroupCategories: boolean;
+	setDeleteGroupCategories: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
 const DeleteGroupModal = (props: IDeleteGroupModal): JSX.Element => {
 	const {
 		isOpen,
 		toggleModal,
-		mainModalAction,
-		secondaryModalAction,
+		onDelete,
+		isLoading = false,
 		deleteGroupCategories,
 		setDeleteGroupCategories,
 	} = props;
 
+	const mainModalAction = {
+		title: isLoading ? "deleting" : "delete",
+		onClick: onDelete,
+		disabled: isLoading,
+	};
+
+	const secondaryModalAction = {
+		title: "Cancel",
+		onClick: toggleModal,
+	};
+
 	const options = [
 		{
 			title: "Delete only the grouping category",
@@ -60,6 +94,7 @@ const DeleteGroupModal = (props: IDeleteGroupModal): JSX.Element => {
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
+			height="auto"
 		>
 			<S.ModalContent>
 				<p>
@@ -78,9 +113,4 @@ const DeleteGroupModal = (props: IDeleteGroupModal): JSX.Element => {
 	);
 };
 
-interface IDeleteGroupModal extends IModal {
-	deleteGroupCategories: boolean;
-	setDeleteGroupCategories: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
 export { DeleteModal, DeleteGroupModal };

package/src/modules/Categories/CategoriesList/index.tsx

@@ -63,6 +63,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 		setLanguage,
 		totalItems,
 		categories,
+		isSaving,
 		setSelectedCategory,
 		activatedDataPacks,
 		deleteDataContent,
@@ -72,7 +73,6 @@ const CategoriesList = (props: IProps): JSX.Element => {
 	} = props;
 
 	const [isScrolling, setIsScrolling] = useState(false);
-	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [deleteGroupCategories, setDeleteGroupCategories] = useState(false);
 	const [searchQuery, setSearchQuery] = useState<string>("");
 	const [items, setItems] = useState<TreeItem[]>(currentDataContent);
@@ -197,7 +197,6 @@ const CategoriesList = (props: IProps): JSX.Element => {
 		: undefined;
 
 	const bulkDelete = async () => {
-		setIsBulkLoading(true);
 		const { groups, categories } = filterCategoriesAndGroups(currentDataContent);
 		const idsCatsToBeDeleted = getAllLangCategoriesIds(categories, selectedItems);
 		const idsGroupsToBeDeleted = getAllLangCategoriesIds(groups, selectedItems);
@@ -211,7 +210,6 @@ const CategoriesList = (props: IProps): JSX.Element => {
 			isOpen("delete") && toggleModal("delete");
 			isOpen("group") && toggleModal("group");
 		}
-		setIsBulkLoading(false);
 	};
 
 	const handleToggleDeleteModal = () => {
@@ -259,7 +257,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 			filterItems={filterItems}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
-			isLoading={isBulkLoading}
+			isLoading={isSaving}
 		/>
 	);
 
@@ -341,28 +339,6 @@ const CategoriesList = (props: IProps): JSX.Element => {
 		action: hasCategories ? () => toggleModal("panel") : () => setHistoryPush("/sites/settings/content-types"),
 	};
 
-	const mainDeleteModalAction = {
-		title: isBulkLoading ? "deleting" : "delete",
-		onClick: bulkDelete,
-		disabled: isBulkLoading,
-	};
-
-	const secondaryDeleteModalAction = {
-		title: "Cancel",
-		onClick: () => toggleModal("delete"),
-	};
-
-	const mainDeleteGroupModalAction = {
-		title: isBulkLoading ? "deleting" : "delete",
-		disabled: isBulkLoading,
-		onClick: bulkDelete,
-	};
-
-	const secondaryDeleteGroupModalAction = {
-		title: "cancel",
-		onClick: () => toggleModal("group"),
-	};
-
 	return (
 		<MainWrapper
 			title={toTitleCase(LOCALE.entityLabel.category.other)}
@@ -456,16 +432,16 @@ const CategoriesList = (props: IProps): JSX.Element => {
 				<DeleteModal
 					isOpen={isOpen("delete")}
 					toggleModal={() => toggleModal("delete")}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					onDelete={bulkDelete}
+					isLoading={isSaving}
 				/>
 			)}
 			{isOpen("group") && (
 				<DeleteGroupModal
 					isOpen={isOpen("group")}
 					toggleModal={() => toggleModal("group")}
-					mainModalAction={mainDeleteGroupModalAction}
-					secondaryModalAction={secondaryDeleteGroupModalAction}
+					onDelete={bulkDelete}
+					isLoading={isSaving}
 					deleteGroupCategories={deleteGroupCategories}
 					setDeleteGroupCategories={setDeleteGroupCategories}
 				/>
@@ -485,6 +461,7 @@ const mapStateToProps = (state: IRootState) => ({
 	lang: state.app.lang,
 	totalItems: state.sites.totalItems,
 	activatedDataPacks: state.dataPacks.activated,
+	isSaving: state.app.isSaving,
 });
 
 interface IDispatchProps {
@@ -507,6 +484,7 @@ interface ICategoriesProps {
 	totalItems: number;
 	categories: { global: IStructuredData[]; site: IStructuredData[] };
 	activatedDataPacks: IDataPack[];
+	isSaving: boolean;
 }
 
 type IProps = ICategoriesProps & IDispatchProps;

package/src/modules/Content/PageItem/index.tsx

@@ -200,7 +200,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
 	const handleDeleteItem = async () => {
 		const allPageVersions = pageLanguages.map((lang: IPageLanguage) => lang.pageId);
-		deleteAllVersions ? deleteBulk(allPageVersions) : deletePage();
+		deleteAllVersions ? await deleteBulk(allPageVersions) : await deletePage();
 		toggleModal("delete");
 	};
 
@@ -333,7 +333,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
 	if (isAllowedToDelete) {
 		menuOptions.push({
-			label: isGlobal ? "Remove" : "delete",
+			label: isGlobal ? "remove" : "delete",
 			icon: "delete",
 			action: () => toggleModal(isGlobal ? "remove" : "delete"),
 			disabled: deleteDisabled,
@@ -538,13 +538,14 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 				toggleModal={() => toggleModal("remove")}
 				pageTitle={page.title}
 				onRemove={handleRemoveItemFromSite}
+				isRemoving={isSaving}
 			/>
 			<UnpublishPageModal isOpen={isOpen("unpublish")} toggleModal={() => toggleModal("unpublish")} />
 			<DeleteModal
 				isOpen={isOpen("delete")}
 				toggleModal={() => toggleModal("delete")}
 				onDelete={handleDeleteItem}
-				{...{ isTranslated, deleteAllVersions, setDeleteAllVersions, title: page.title }}
+				{...{ isTranslated, deleteAllVersions, setDeleteAllVersions, title: page.title, isDeleting: isSaving }}
 			/>
 		</>
 	);
@@ -571,14 +572,14 @@ interface IPageItemProps {
 	functions: {
 		onClick: (e: any) => void;
 		onCheck: (e: any) => void;
-		deletePage(params?: ISavePageParams, currentLanguage?: string): void;
+		deletePage(params?: ISavePageParams, currentLanguage?: string): Promise<boolean>;
 		getSiteContent(): any;
 		setHistoryPush(path: string, isEditor: boolean): void;
 		updatePageStatus(ids: number[], status: string, updatedFromList: boolean): Promise<boolean>;
 		setCurrentPageID(currentPageID: number | null): ISetCurrentPageIDAction;
 		duplicatePage(pageID: number, data: any, siteID?: number): Promise<boolean>;
 		removePageFromSite(pageID: number): Promise<boolean>;
-		deleteBulk(ids: number[]): void;
+		deleteBulk(ids: number[]): Promise<boolean>;
 		setTemplateInstanceError(error: any): void;
 		getDataPack: (id: string) => Promise<void>;
 		toggleCopiedToast(): void;

package/src/modules/Content/atoms.tsx

@@ -6,7 +6,8 @@ import type { IModal, ISite } from "@ax/types";
 import * as S from "./style";
 
 const DeleteModal = (props: IDeleteModal): JSX.Element => {
-	const { isOpen, toggleModal, isTranslated, deleteAllVersions, setDeleteAllVersions, title, onDelete, isDeleting } = props;
+	const { isOpen, toggleModal, isTranslated, deleteAllVersions, setDeleteAllVersions, title, onDelete, isDeleting } =
+		props;
 
 	const options = [
 		{
@@ -39,6 +40,7 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
 			secondaryAction={secondaryAction}
 			mainAction={mainAction}
 			size="S"
+			height="auto"
 		>
 			{isTranslated ? (
 				<>
@@ -167,11 +169,12 @@ const DuplicatePageModal = (props: IDuplicatePageModal): JSX.Element => {
 };
 
 const RemovePageModal = (props: IRemovePageModal): JSX.Element => {
-	const { isOpen, toggleModal, pageTitle, onRemove } = props;
+	const { isOpen, toggleModal, pageTitle, onRemove, isRemoving } = props;
 
 	const mainAction = {
-		title: "Remove",
+		title: isRemoving ? "Removing" : "Remove",
 		onClick: onRemove,
+		disabled: isRemoving,
 	};
 
 	const secondaryAction = { title: "Cancel", onClick: toggleModal };
@@ -250,6 +253,7 @@ interface IDuplicatePageModal extends IModal {
 interface IRemovePageModal extends IModal {
 	pageTitle: string;
 	onRemove: () => void;
+	isRemoving?: boolean;
 }
 
 interface IUnpublishPageModal extends IModal {}