@griddo/ax 11.10.41 → 11.10.42

package/src/locales/index.ts

@@ -1,3 +1,5 @@
+import type { ItemLabel } from "@ax/constants";
+
 import { enUS } from "./en-US";
 import { esES } from "./es-ES";
 
@@ -8,4 +10,13 @@ const allLocales = {
 	"es-ES": esES,
 } as const;
 
+/**
+ * Obtiene la traducción correcta basada en la cantidad.
+ * @param entry La entrada del objeto de locales
+ * @param count El número de elementos (por defecto 1)
+ */
+export const pluralize = (entry: ItemLabel, count: number = 1): string => {
+	return count === 1 ? entry.one : entry.other;
+};
+
 export const LOCALE = allLocales[currentLocale as keyof typeof allLocales];

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

@@ -1,4 +1,5 @@
 import { BulkSelectionOptions } from "@ax/components";
+import { itemLabel } from "@ax/constants";
 import type { IBulkSelectedItems } from "@ax/hooks";
 import type { IQueryValue } from "@ax/types";
 
@@ -17,6 +18,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 		filterValues,
 		setHoverCheck,
 		selectedItems,
+		isLoading,
 	} = props;
 
 	return showBulk ? (
@@ -26,6 +28,8 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			selectItems={selectItems}
 			totalItems={totalItems}
 			selectedItems={selectedItems}
+			isLoading={isLoading}
+			itemLabel={itemLabel.CATEGORY}
 		/>
 	) : (
 		<TableHeader
@@ -52,6 +56,7 @@ interface IProps {
 	filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkHeader;

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

@@ -46,9 +46,10 @@ import CategoryNav from "./CategoryNav";
 import CategoryPanel from "./CategoryPanel";
 import { buildTree, type FlattenedItem, flattenTree, getProjection, removeChildrenOf, setProperty } from "./helpers";
 import { useFilterQuery } from "./hooks";
-import * as S from "./style";
 import { filterCategoriesAndGroups, getAllLangCategoriesIds } from "./utils";
 
+import * as S from "./style";
+
 const CategoriesList = (props: IProps): JSX.Element => {
 	const {
 		currentSiteID,
@@ -71,6 +72,7 @@ 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);
@@ -94,7 +96,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 	const currentCategories = categories[scope].sort(sortBy("title", false));
 	const isEmpty = currentDataContent && currentDataContent.length === 0;
 	const hasCategories = currentCategories.length > 0;
-	const categoryName = (currentStructuredData && currentStructuredData.title) || "";
+	const categoryName = currentStructuredData?.title || "";
 	const availableLanguages = currentSiteID ? siteLanguages : globalLangs;
 	const isTranslatable = currentStructuredData ? currentStructuredData.translate : true;
 	const indentationWidth = 35;
@@ -102,6 +104,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 	const flattenedItems = useMemo(() => {
 		const flattenedTree = flattenTree(items);
 		const collapsedItems = flattenedTree.reduce<number[]>(
+			// biome-ignore lint/performance/noAccumulatingSpread: TODO: fix this
 			(acc, { children, collapsed, id }) => (collapsed && children.length ? [...acc, id] : acc),
 			[],
 		);
@@ -197,6 +200,7 @@ 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);
@@ -210,6 +214,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 			isDeleteOpen && toggleDeleteModal();
 			isGroupOpen && toggleGroupModal();
 		}
+		setIsBulkLoading(false);
 	};
 
 	const handleToggleDeleteModal = () => {
@@ -257,6 +262,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 			filterItems={filterItems}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
+			isLoading={isBulkLoading}
 		/>
 	);
 
@@ -424,7 +430,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 													depth={id === activeId && projected ? projected.depth : depth}
 													indentationWidth={indentationWidth}
 													collapsed={Boolean(collapsed && children.length)}
-													onCollapse={children && children.length ? () => handleCollapse(id) : undefined}
+													onCollapse={children?.length ? () => handleCollapse(id) : undefined}
 												/>
 											);
 										})}
@@ -461,7 +467,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 
 const mapStateToProps = (state: IRootState) => ({
 	categories: state.structuredData.categories,
-	currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+	currentSiteID: state.sites.currentSiteInfo?.id ?? null,
 	siteLanguages: state.sites.currentSiteLanguages,
 	globalLangs: state.app.globalLangs,
 	currentDataContent: state.structuredData.currentDataCategory,

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

@@ -1,4 +1,5 @@
 import { BulkSelectionOptions } from "@ax/components";
+import { getContentItemLabel } from "@ax/helpers/content";
 import type { IBulkSelectedItems } from "@ax/hooks";
 import { usePermission } from "@ax/hooks";
 import type { IColumn, IQueryValue } from "@ax/types";
@@ -31,6 +32,8 @@ const BulkHeader = (props: IProps): JSX.Element => {
 		exportAction,
 		setHoverCheck,
 		selectedItems,
+		isLoading,
+		checkFromPage,
 	} = props;
 
 	const isAllowedToDeletePage = usePermission("content.deletePages");
@@ -68,6 +71,12 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			totalItems={totalItems}
 			exportAction={exportAction}
 			selectedItems={selectedItems}
+			isLoading={isLoading}
+			itemLabel={getContentItemLabel({
+				isPageContentType: checkFromPage,
+				isSimpleContentType: isStructuredData,
+				isStandardPage: !checkFromPage && !isStructuredData,
+			})}
 		/>
 	) : (
 		<TableHeader
@@ -116,6 +125,8 @@ interface IProps {
 	exportAction?(formats: (number | string)[]): void;
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
+	checkFromPage: boolean;
 }
 
 export default BulkHeader;

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

@@ -300,6 +300,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 		onClick: handleDuplicatePage,
 		disabled: !modalState.title.trim() || !modalState.slug.trim() || isSaving,
 	};
+
 	const secondaryModalAction = { title: "Cancel", onClick: handleCloseDuplicate };
 
 	const currentLanguages = getCurrentPageLanguages();

package/src/modules/Content/atoms.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { IModal, ISite } from "@ax/types";
+import type { IModal, ISite } from "@ax/types";
 import { Modal, FieldsBehavior, Select, Button } from "@ax/components";
 
 import * as S from "./style";

package/src/modules/Content/index.tsx

@@ -210,6 +210,7 @@ const Content = (props: IProps): JSX.Element => {
 	const [columnsState, setColumnsState] = useState(initialColumns);
 
 	const [isDeleting, setIsDeleting] = useState<boolean>(false);
+	const [isBulkLoading, setIsBulkLoading] = useState<boolean>(false);
 
 	const createPermission = isDataPrivate ? "content.createPrivateContentTypes" : "content.createPages";
 	const exportPermission = isDataPrivate ? "content.exportPrivateContentTypes" : "content.exportContentTypes";
@@ -491,6 +492,7 @@ const Content = (props: IProps): JSX.Element => {
 
 	const bulkDelete = async () => {
 		let allPageVersions: number[] = [];
+		setIsBulkLoading(true); // se podría usar setIsDeleting pero por seguridad prefiero usar uno propio
 		setIsDeleting(true);
 		if (deleteAllVersions) {
 			const selectedPages = currentSitePages.filter((page) => selectedItems.all.includes(page.id));
@@ -516,6 +518,7 @@ const Content = (props: IProps): JSX.Element => {
 		const previousPage = page - 1;
 		page > 1 && (isLastItem || allPageItemsSelected) ? setPage(previousPage) : getSiteContent();
 		unselectAllItems();
+		setIsBulkLoading(false);
 		setIsDeleting(false);
 	};
 
@@ -527,6 +530,7 @@ const Content = (props: IProps): JSX.Element => {
 	};
 
 	const bulkPublishAction = async (isPublish: boolean) => {
+		setIsBulkLoading(true);
 		const { notPublished, published, drafts } = selectedItems;
 
 		if (drafts && drafts.length > 0) {
@@ -555,11 +559,30 @@ const Content = (props: IProps): JSX.Element => {
 
 		getSiteContent();
 		unselectAllItems();
+		setIsBulkLoading(false);
 	};
 
-	const bulkPublish = () => (isStructuredData ? setDataStatus(selectedItems.all, "undraft") : bulkPublishAction(true));
+	const bulkPublish = () => {
+		if (isStructuredData) {
+			setIsBulkLoading(true);
+			setDataStatus(selectedItems.all, "undraft");
+			unselectAllItems();
+			setIsBulkLoading(false);
+		} else {
+			bulkPublishAction(true);
+		}
+	};
 
-	const bulkUnpublish = () => (isStructuredData ? setDataStatus(selectedItems.all, "draft") : bulkPublishAction(false));
+	const bulkUnpublish = () => {
+		if (isStructuredData) {
+			setIsBulkLoading(true);
+			setDataStatus(selectedItems.all, "draft");
+			unselectAllItems();
+			setIsBulkLoading(false);
+		} else {
+			bulkPublishAction(false);
+		}
+	};
 
 	const sortItems = (orderPointer: IQueryValue[], isAscending: boolean) => {
 		setPage(firstPage);
@@ -600,6 +623,7 @@ const Content = (props: IProps): JSX.Element => {
 			sortedListStatus={sortedListStatus}
 			filterItems={filterItems}
 			isEditable={isDataEditable}
+			isLoading={isBulkLoading}
 			filterValues={filterValues}
 			categoryColumns={categoryColumns}
 			columns={columnsState}
@@ -610,6 +634,7 @@ const Content = (props: IProps): JSX.Element => {
 			exportAction={exportContent}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
+			checkFromPage={checkFromPage}
 		/>
 	);
 

package/src/modules/FileDrive/BulkGridHeader/index.tsx

@@ -1,3 +1,4 @@
+import { itemLabel } from "@ax/constants";
 import type { IBulkSelectedItems } from "@ax/hooks";
 import type { IBulkAction } from "@ax/types";
 
@@ -6,7 +7,8 @@ import GridHeader from "./GridHeader";
 import * as S from "./style";
 
 const BulkGridHeader = (props: IBulkHeaderProps): JSX.Element => {
-	const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions, selectedItems } = props;
+	const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions, selectedItems, isLoading } =
+		props;
 
 	return showBulk ? (
 		<S.BulkWrapper>
@@ -17,6 +19,8 @@ const BulkGridHeader = (props: IBulkHeaderProps): JSX.Element => {
 				selectItems={selectItems}
 				totalItems={totalItems}
 				selectedItems={selectedItems}
+				isLoading={isLoading}
+				itemLabel={itemLabel.FILE}
 			/>
 		</S.BulkWrapper>
 	) : (
@@ -32,6 +36,7 @@ export interface IBulkHeaderProps {
 	totalItems: number;
 	bulkActions: IBulkAction[];
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkGridHeader;

package/src/modules/FileDrive/BulkListHeader/index.tsx

@@ -1,3 +1,4 @@
+import { itemLabel } from "@ax/constants";
 import type { IBulkSelectedItems } from "@ax/hooks";
 import type { IBulkAction } from "@ax/types";
 
@@ -16,6 +17,7 @@ const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
 		isSearching,
 		setHoverCheck,
 		selectedItems,
+		isLoading,
 	} = props;
 
 	return showBulk ? (
@@ -27,6 +29,8 @@ const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
 				selectItems={selectItems}
 				totalItems={totalItems}
 				selectedItems={selectedItems}
+				isLoading={isLoading}
+				itemLabel={itemLabel.FILE}
 			/>
 		</S.BulkWrapper>
 	) : (
@@ -51,6 +55,7 @@ export interface IBulkHeaderProps {
 	isSearching: boolean;
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkListHeader;

package/src/modules/FileDrive/index.tsx

@@ -21,6 +21,7 @@ import {
 } from "@ax/components";
 import { fileDriveActions } from "@ax/containers/FileDrive";
 import { useBulkSelection, useIsDirty, useModal, usePermission, useResizable, useToast } from "@ax/hooks";
+import { LOCALE, pluralize } from "@ax/locales";
 import type {
 	IBulkAction,
 	IFile,
@@ -78,6 +79,7 @@ const FileDrive = (props: IProps) => {
 		folders,
 	} = currentFolderContent || { files: { totalItems: 0, items: [] }, folders: [] };
 
+	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [isPanelOpen, setPanelOpen] = useState(false);
 	const [fileSelected, setFileSelected] = useState<IFile | null>(null);
 	const [selectedFolder, setSelectedFolder] = useState<number>(currentFolderID || 0);
@@ -341,6 +343,7 @@ const FileDrive = (props: IProps) => {
 	};
 
 	const handleBulkDeleteFile = async () => {
+		setIsBulkLoading(true);
 		const isDeleted = await deleteFile(selectedItems.all, siteID);
 		if (isDeleted) {
 			setNumDocs(selectedItems.all.length);
@@ -348,6 +351,7 @@ const FileDrive = (props: IProps) => {
 			toggleDeleteToast();
 			resetBulkSelection();
 		}
+		setIsBulkLoading(false);
 	};
 
 	const handleMoveFile = async (fileID: number, folderID: number) => {
@@ -359,6 +363,7 @@ const FileDrive = (props: IProps) => {
 	};
 
 	const handleBulkMoveFile = async () => {
+		setIsBulkLoading(true);
 		const isMoved = await moveFile(selectedItems.all, selectedFolder, siteID);
 		if (isMoved) {
 			setNumDocs(selectedItems.all.length);
@@ -367,6 +372,7 @@ const FileDrive = (props: IProps) => {
 			setSelectedFolder(0);
 			resetBulkSelection();
 		}
+		setIsBulkLoading(false);
 	};
 
 	const handleBulkEditFile = () => {
@@ -392,8 +398,10 @@ const FileDrive = (props: IProps) => {
 	};
 
 	const handleDownloadBulk = async () => {
+		setIsBulkLoading(true);
 		await downloadFiles(selectedItems.all, true);
 		resetBulkSelection();
+		setIsBulkLoading(false);
 	};
 
 	const handleUpdateCurrentFolder = (folderID: number | null) => {
@@ -460,6 +468,7 @@ const FileDrive = (props: IProps) => {
 			isSearching={isSearching}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
+			isLoading={isBulkLoading}
 		/>
 	);
 
@@ -713,6 +722,7 @@ const FileDrive = (props: IProps) => {
 											selectItems={selectItems}
 											bulkActions={bulkActions}
 											selectedItems={selectedItems}
+											isLoading={isBulkLoading}
 										/>
 									)}
 									{!hasFolders && isRoot && !isSearching && <NewFolderButton />}

package/src/modules/Forms/FormCategoriesList/BulkHeader/index.tsx

@@ -1,3 +1,4 @@
+import { itemLabel } from "@ax/constants";
 import type { IBulkSelectedItems } from "@ax/hooks";
 
 import TableHeader from "./TableHeader";
@@ -5,8 +6,17 @@ import TableHeader from "./TableHeader";
 import * as S from "./style";
 
 const BulkHeader = (props: IProps): JSX.Element => {
-	const { showBulk, checkState, selectItems, totalItems, isScrolling, bulkActions, setHoverCheck, selectedItems } =
-		props;
+	const {
+		showBulk,
+		checkState,
+		selectItems,
+		totalItems,
+		isScrolling,
+		bulkActions,
+		setHoverCheck,
+		selectedItems,
+		isLoading,
+	} = props;
 
 	return showBulk ? (
 		<S.StyledBulkSelectionOptions
@@ -15,6 +25,8 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			selectItems={selectItems}
 			totalItems={totalItems}
 			selectedItems={selectedItems}
+			isLoading={isLoading}
+			itemLabel={itemLabel.CATEGORY}
 		/>
 	) : (
 		<TableHeader
@@ -36,6 +48,7 @@ interface IProps {
 	bulkActions: { icon: string; text: string; action: () => void }[];
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkHeader;

package/src/modules/Forms/FormCategoriesList/index.tsx

@@ -25,6 +25,7 @@ import { DeleteModal } from "./atoms";
 import BulkHeader from "./BulkHeader";
 import CategoryItem from "./CategoryItem";
 import CategoryPanel from "./CategoryPanel";
+
 import * as S from "./style";
 
 const FormCategoriesList = (props: IProps): JSX.Element => {
@@ -41,6 +42,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 	const isSiteView = !!currentSiteID;
 
 	const [isScrolling, setIsScrolling] = useState(false);
+	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [draggingId, setDraggingId] = useState<number | null>(null);
 	const [searchQuery, setSearchQuery] = useState<string>("");
 	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
@@ -100,10 +102,14 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 		: undefined;
 
 	const bulkDelete = async () => {
+		setIsBulkLoading(true);
 		const deleted = await deleteFormCategory(selectedItems.all, category);
 		if (deleted) {
+			resetBulkSelection();
+			toggleToast(`${selectedItems.all.length} categor${selectedItems.all.length > 1 ? "ies" : "y"} deleted`);
 			toggleDeleteModal();
 		}
+		setIsBulkLoading(false);
 	};
 
 	const selectItems = () => (checkState.isAllSelected ? resetBulkSelection() : selectAllItems());
@@ -135,6 +141,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 			isScrolling={isScrolling}
 			bulkActions={bulkActions}
 			setHoverCheck={setHoverCheck}
+			isLoading={isBulkLoading}
 		/>
 	);
 
@@ -260,6 +267,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 
 const mapStateToProps = (state: IRootState) => ({
 	categories: state.forms.currentFormCategories,
+	// biome-ignore lint/complexity/useOptionalChain: TODO: fix this
 	currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
 });
 

package/src/modules/Forms/FormEditor/index.tsx

@@ -90,7 +90,15 @@ const FormEditor = (props: IProps) => {
 	const isAllowedToDeleteForm = usePermission(deleteFormPermission);
 	const isAllowedToPublishForm = usePermission(publishFormPermission);
 
-	const toastMsg = "This form is used in some pages. Changes will apply to all pages where it’s in use.";
+	const toastMsg = (
+		<>
+			This form is used in some pages. Changes will apply to all pages where it’s{" "}
+			<button type="button" onClick={toggleUseModal}>
+				in use.
+			</button>
+		</>
+	);
+
 	const backLinkRoute = isSiteView ? "/sites/forms" : "/forms";
 	const { defaultTheme: theme } = useDefaultTheme();
 
@@ -293,6 +301,7 @@ const FormEditor = (props: IProps) => {
 				isDirty={isDirty}
 				errors={errors}
 				errorActions={{ goToError }}
+				isSaving={isSaving}
 			>
 				{notification && (
 					<S.NotificationWrapper>

package/src/modules/Forms/FormList/BulkHeader/index.tsx

@@ -1,4 +1,5 @@
 import { BulkSelectionOptions } from "@ax/components";
+import { itemLabel } from "@ax/constants";
 import type { IBulkSelectedItems } from "@ax/hooks";
 import type { IQueryValue } from "@ax/types";
 
@@ -21,6 +22,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 		featuredCategory,
 		bulkActions,
 		siteID,
+		isLoading,
 	} = props;
 
 	return showBulk ? (
@@ -30,6 +32,8 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			selectItems={selectItems}
 			totalItems={totalItems}
 			selectedItems={selectedItems}
+			isLoading={isLoading}
+			itemLabel={itemLabel.FORM}
 		/>
 	) : (
 		<TableHeader
@@ -64,6 +68,7 @@ interface IProps {
 	filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkHeader;

package/src/modules/Forms/FormList/index.tsx

@@ -16,6 +16,7 @@ import { formsActions } from "@ax/containers/Forms";
 import { ITEMS_PER_PAGE } from "@ax/containers/Forms/constants";
 import { getFormTemplates, getSchemaFormCategories } from "@ax/helpers";
 import { useBulkSelection, useCategoryColors, useModal, usePermission, useToast } from "@ax/hooks";
+import { LOCALE, pluralize } from "@ax/locales";
 import type {
 	FormContent,
 	FormState,
@@ -35,9 +36,10 @@ import BulkHeader from "./BulkHeader";
 import FormItem from "./FormItem";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
 import Summary from "./Summary";
-import * as S from "./style";
 import { TemplateModal } from "./TemplateModal";
 
+import * as S from "./style";
+
 const FormList = (props: IUserListProps): JSX.Element => {
 	const {
 		currentSiteInfo,
@@ -70,6 +72,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 
 	const [page, setPage] = useState(firstPage);
 	const [isScrolling, setIsScrolling] = useState(false);
+	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [selectedTemplate, setSelectedTemplate] = useState<ISchema | null>(null);
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 	const [arePagesTranslated, setArePagesTranslated] = useState(false);
@@ -175,14 +178,17 @@ const FormList = (props: IUserListProps): JSX.Element => {
 	};
 
 	const publishForm = async () => {
+		setIsBulkLoading(true);
 		const isUpdated = await updateFormState(selectedItems.all, "active");
 		if (isUpdated) {
 			resetBulkSelection();
 			toggleToast(`${selectedItems.all.length} form${selectedItems.all.length > 1 ? "s" : ""} published`);
 		}
+		setIsBulkLoading(false);
 	};
 
 	const unpublishForm = async () => {
+		setIsBulkLoading(true);
 		const isUsed = forms.some((form) => selectedItems.all.includes(form.id) && !!form.formInUse);
 		if (isUsed) {
 			setNotification({
@@ -197,9 +203,11 @@ const FormList = (props: IUserListProps): JSX.Element => {
 			}
 		}
 		isUnpublishOpen && toggleUnpublishModal();
+		setIsBulkLoading(false);
 	};
 
 	const handleDeleteForm = async () => {
+		setIsBulkLoading(true);
 		const idsToBeDeleted = getAllLangFormsIds(forms, selectedItems.all, deleteAllVersions);
 		const isUsed = forms.some((form) => idsToBeDeleted.includes(form.id) && !!form.formInUse);
 		if (isUsed) {
@@ -214,6 +222,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 			}
 		}
 		isDeleteOpen && toggleDeleteModal();
+		setIsBulkLoading(false);
 	};
 
 	const handleToggleBulkDelete = () => {
@@ -269,6 +278,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 			featuredCategory={featuredCategory}
 			bulkActions={bulkActions}
 			siteID={currentSiteInfo?.id || null}
+			isLoading={isBulkLoading}
 		/>
 	);
 
@@ -378,8 +388,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 										)}
 									</S.EmptyWrapper>
 								) : (
-									forms &&
-									forms.map((form) => {
+									forms?.map((form) => {
 										const isItemSelected = isSelected(form.id);
 										return (
 											<FormItem

package/src/modules/Forms/FormUseModal/FormUseItem/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { ElementsTooltip, IconAction } from "@ax/components";
 
 import * as S from "./style";
@@ -7,7 +6,7 @@ const FormUseItem = (props: IFormUseItem): JSX.Element => {
 	const { isSiteView, title, subtitle, structuredDataTitle, categoryColors, availableSiteNames, goToItem } = props;
 
 	return (
-		<S.Item>
+		<S.Item data-testid="form-use-item">
 			<S.PageInfo>
 				<S.Title>{title}</S.Title>
 				<S.SubTitle>{subtitle}</S.SubTitle>

package/src/modules/Forms/FormUseModal/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import {
+import type {
 	IAvailableSites,
 	IFilterValue,
 	IGetPagesParams,
@@ -80,7 +80,7 @@ const FormUseModal = (props: IFormUseModalModal): JSX.Element => {
 				let pagesData: IPage[] = [];
 				let navsData: INavigation[] = [];
 
-				if (page && page.length) {
+				if (page?.length) {
 					const params = getParams();
 					const data = await getPages(params);
 
@@ -153,7 +153,7 @@ const FormUseModal = (props: IFormUseModalModal): JSX.Element => {
 			setHistoryPush("/sites/pages/editor", true);
 		} else {
 			setCurrentPageID(pageID);
-			setHistoryPush(isSiteView ? "pages/editor" : "/data/pages/editor", true);
+			setHistoryPush(isSiteView ? "/sites/pages/editor" : "/data/pages/editor", true);
 		}
 	};
 

package/src/modules/GlobalEditor/index.tsx

@@ -600,6 +600,7 @@ const GlobalEditor = (props: IProps) => {
 				tabs={tabsPreview}
 				isDirty={isDirty}
 				scheduledPublication={editorContent?.publicationScheduled}
+				isSaving={isSaving}
 			>
 				{selectedTab === "edit" ? (
 					<>