@griddo/ax 11.10.41 → 11.10.42

package/src/modules/MediaGallery/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.IMAGE}
 			/>
 		</S.BulkWrapper>
 	) : (
@@ -32,6 +36,7 @@ export interface IBulkHeaderProps {
 	totalItems: number;
 	bulkActions: IBulkAction[];
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkGridHeader;

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

@@ -1,3 +1,4 @@
+import { itemLabel } from "@ax/constants";
 import type { IBulkSelectedItems } from "@ax/hooks";
 import type { IBulkAction } from "@ax/types";
 
@@ -6,8 +7,17 @@ import TableHeader from "./TableHeader";
 import * as S from "./style";
 
 const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
-	const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions, setHoverCheck, selectedItems } =
-		props;
+	const {
+		showBulk,
+		checkState,
+		selectItems,
+		selectAllItems,
+		totalItems,
+		bulkActions,
+		setHoverCheck,
+		selectedItems,
+		isLoading,
+	} = props;
 
 	return showBulk ? (
 		<S.BulkWrapper>
@@ -18,6 +28,8 @@ const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
 				selectItems={selectItems}
 				totalItems={totalItems}
 				selectedItems={selectedItems}
+				isLoading={isLoading}
+				itemLabel={itemLabel.IMAGE}
 			/>
 		</S.BulkWrapper>
 	) : (
@@ -40,6 +52,7 @@ export interface IBulkHeaderProps {
 	bulkActions: IBulkAction[];
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkListHeader;

package/src/modules/MediaGallery/index.tsx

@@ -86,10 +86,11 @@ const MediaGallery = (props: IProps) => {
 	const firstPage = 1;
 	const lastPage = Math.ceil(totalItems / itemsPerPage);
 	const [page, setPage] = useState(firstPage);
+	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [isPanelOpen, setPanelOpen] = useState(false);
 	const [fileSelected, setFileSelected] = useState<IImage | null>(null);
 	const [selectedFolder, setSelectedFolder] = useState<number | null>(currentFolderID || null);
-	const imagesIds: number[] = (items && items.map((image) => image.id)) || [];
+	const imagesIds = items?.map((image) => image.id) || [];
 	const [galleryItems, setGalleryItems] = useState<number[]>(imagesIds);
 	const [galleryDelete, setGalleryDelete] = useState(true);
 	const [progressItems, setProgressItems] = useState<IProgressState>({
@@ -381,6 +382,7 @@ const MediaGallery = (props: IProps) => {
 	};
 
 	const handleBulkDeleteFile = async () => {
+		setIsBulkLoading(true);
 		const params = getParams();
 		const resetedParams = { ...params, page: firstPage, infinite: false, loading: true };
 		const isDeleted = await deleteImage(selectedItems.all, resetedParams);
@@ -389,18 +391,22 @@ const MediaGallery = (props: IProps) => {
 			resetBulkSelection();
 		}
 		toggleDeleteModal();
+		setIsBulkLoading(false);
 	};
 
 	const handleMoveImage = async (imageID: number, folderID: number | "root") => {
+		setIsBulkLoading(true);
 		const params = getParams();
 		const resetedParams = { ...params, page: firstPage, infinite: false, loading: true };
 		const isMoved = await moveImage(imageID, folderID, resetedParams);
 		if (isMoved) {
 			toggleToast("1 Image moved to a folder");
 		}
+		setIsBulkLoading(false);
 	};
 
 	const handleBulkMoveFile = async () => {
+		setIsBulkLoading(true);
 		const params = getParams();
 		const resetedParams = { ...params, page: firstPage, infinite: false, loading: true };
 		const isMoved = await moveImage(selectedItems.all, selectedFolder || "root", resetedParams);
@@ -410,6 +416,7 @@ const MediaGallery = (props: IProps) => {
 			setSelectedFolder(0);
 			resetBulkSelection();
 		}
+		setIsBulkLoading(false);
 	};
 
 	const handleBulkEditFile = () => {
@@ -435,9 +442,11 @@ const MediaGallery = (props: IProps) => {
 	};
 
 	const handleDownloadBulk = async () => {
+		setIsBulkLoading(true);
 		const fileName = isSiteView ? `${currentSiteInfo.name}-images.zip` : "global-images.zip";
 		await downloadImages(selectedItems.all, true, fileName);
 		resetBulkSelection();
+		setIsBulkLoading(false);
 	};
 
 	const handleUpdateCurrentFolder = (folderID: number | null) => {
@@ -513,6 +522,7 @@ const MediaGallery = (props: IProps) => {
 			bulkActions={bulkActions}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
+			isLoading={isBulkLoading}
 		/>
 	);
 
@@ -525,23 +535,23 @@ const MediaGallery = (props: IProps) => {
 					<UploadItem uploadPercentage={progress} grid={true} key={index} />
 				))}
 			{items?.map((image: IImage) => {
-					const isItemSelected = isSelected(image.id);
-					return (
-						<GridItem
-							image={image}
-							isSelected={isItemSelected}
-							onChange={addToBulkSelection}
-							key={`${image.name}${image.id}`}
-							onClick={handleClick}
-							onDelete={handleDeleteFile}
-							onMove={handleMoveImage}
-							currentFolderID={currentFolderID}
-							isAllowedToDelete={allowedToDeleteFile}
-							isAllowedToEdit={allowedToEditFile}
-							isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
-						/>
-					);
-				})}
+				const isItemSelected = isSelected(image.id);
+				return (
+					<GridItem
+						image={image}
+						isSelected={isItemSelected}
+						onChange={addToBulkSelection}
+						key={`${image.name}${image.id}`}
+						onClick={handleClick}
+						onDelete={handleDeleteFile}
+						onMove={handleMoveImage}
+						currentFolderID={currentFolderID}
+						isAllowedToDelete={allowedToDeleteFile}
+						isAllowedToEdit={allowedToEditFile}
+						isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
+					/>
+				);
+			})}
 		</S.GridWrapper>
 	);
 
@@ -566,24 +576,24 @@ const MediaGallery = (props: IProps) => {
 						<UploadItem uploadPercentage={progress} grid={false} key={index} />
 					))}
 				{items?.map((image: IImage) => {
-						const isItemSelected = isSelected(image.id);
-						return (
-							<ListItem
-								image={image}
-								isSelected={isItemSelected}
-								onChange={addToBulkSelection}
-								key={`${image.name}${image.id}`}
-								onClick={handleClick}
-								onDelete={handleDeleteFile}
-								onMove={handleMoveImage}
-								currentFolderID={currentFolderID}
-								isAllowedToDelete={allowedToDeleteFile}
-								isAllowedToEdit={allowedToEditFile}
-								isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
-								hoverCheck={checkState.hoverCheck}
-							/>
-						);
-					})}
+					const isItemSelected = isSelected(image.id);
+					return (
+						<ListItem
+							image={image}
+							isSelected={isItemSelected}
+							onChange={addToBulkSelection}
+							key={`${image.name}${image.id}`}
+							onClick={handleClick}
+							onDelete={handleDeleteFile}
+							onMove={handleMoveImage}
+							currentFolderID={currentFolderID}
+							isAllowedToDelete={allowedToDeleteFile}
+							isAllowedToEdit={allowedToEditFile}
+							isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
+							hoverCheck={checkState.hoverCheck}
+						/>
+					);
+				})}
 			</>
 		</TableList>
 	);
@@ -770,6 +780,7 @@ const MediaGallery = (props: IProps) => {
 											selectItems={selectItems}
 											bulkActions={bulkActions}
 											selectedItems={selectedItems}
+											isLoading={isBulkLoading}
 										/>
 									)}
 									{!hasFolders && isRoot && !isSearching && <NewFolderButton />}

package/src/modules/Navigation/Defaults/BulkHeader/index.tsx

@@ -1,4 +1,5 @@
 import { BulkSelectionOptions } from "@ax/components";
+import { itemLabel } from "@ax/constants";
 import type { IBulkSelectedItems } from "@ax/hooks";
 
 import TableHeader from "./TableHeader";
@@ -14,6 +15,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 		isScrolling,
 		setHoverCheck,
 		selectedItems,
+		isLoading,
 	} = props;
 
 	return showBulk ? (
@@ -23,6 +25,8 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			selectItems={selectItems}
 			totalItems={totalItems}
 			selectedItems={selectedItems}
+			isLoading={isLoading}
+			itemLabel={itemLabel.NAVIGATION}
 		/>
 	) : (
 		<TableHeader
@@ -45,6 +49,7 @@ interface IProps {
 	isScrolling: boolean;
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkHeader;

package/src/modules/Navigation/Defaults/index.tsx

@@ -13,6 +13,7 @@ import BulkHeader from "./BulkHeader";
 import DefaultItem from "./Item";
 import DefaultNav from "./Nav";
 import ReplaceNavModal from "./ReplaceNavModal";
+
 import * as S from "./style";
 
 const DefaultsList = (props: IProps): JSX.Element => {
@@ -36,6 +37,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 		currentSiteInfo,
 	} = props;
 
+	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [page, setPage] = useState(1);
 	const [deletedNav, setDeletedNav] = useState<number | number[] | null>(null);
 	const [updatedPages, setUpdatedPages] = useState<number | null>(null);
@@ -51,7 +53,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 	const isAllowedToDeleteHeaders = usePermission("navigation.deleteSiteHeaders") && selectedDefault === "Headers";
 	const isAllowedToDeleteFooters = usePermission("navigation.deleteSiteFooters") && selectedDefault === "Footers";
 
-	const navIds = currentDefaultsContent && currentDefaultsContent.map((nav: any) => nav.id);
+	const navIds = currentDefaultsContent?.map((nav: any) => nav.id);
 
 	const {
 		resetBulkSelection,
@@ -108,8 +110,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		const isNavigationModulesChanged =
-			currentSiteInfo &&
-			currentSiteInfo.navigationModules?.[currentType] &&
+			currentSiteInfo?.navigationModules?.[currentType] &&
 			currentDefaultsContent.some(
 				(navigation) => navigation.component !== currentSiteInfo?.navigationModules[currentType],
 			);
@@ -175,11 +176,13 @@ const DefaultsList = (props: IProps): JSX.Element => {
 	const handleErrorAction = () => toggleReplaceModal();
 
 	const bulkDelete = async () => {
+		setIsBulkLoading(true);
 		const deleted = await deleteNavigation(selectedItems.all, currentType, handleErrorAction);
 		setDeletedNav(selectedItems.all);
 		if (deleted) {
 			toggleToast();
 		}
+		setIsBulkLoading(false);
 	};
 
 	const unselectAllItems = () => resetBulkSelection();
@@ -212,6 +215,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 			checkState={checkState}
 			isScrolling={isScrolling}
 			setHoverCheck={setHoverCheck}
+			isLoading={isBulkLoading}
 		/>
 	);
 
@@ -248,26 +252,25 @@ const DefaultsList = (props: IProps): JSX.Element => {
 						hasFixedHeader={true}
 						tableRef={tableRef}
 					>
-						{currentDefaultsContent &&
-							currentDefaultsContent.map((defaultContent: IHeader | IFooter) => {
-								const isItemSelected = isSelected(defaultContent.id);
-								return (
-									<DefaultItem
-										defaultContent={defaultContent}
-										key={defaultContent.id}
-										languages={siteLanguages}
-										lang={lang}
-										toggleToast={toggleToast}
-										setDeletedNav={setDeletedNav}
-										isSelected={isItemSelected}
-										onChange={addToBulkSelection}
-										handleClick={setContent}
-										setHistoryPush={setHistoryPush}
-										toggleReplaceModal={toggleReplaceModal}
-										hoverCheck={checkState.hoverCheck}
-									/>
-								);
-							})}
+						{currentDefaultsContent?.map((defaultContent: IHeader | IFooter) => {
+							const isItemSelected = isSelected(defaultContent.id);
+							return (
+								<DefaultItem
+									defaultContent={defaultContent}
+									key={defaultContent.id}
+									languages={siteLanguages}
+									lang={lang}
+									toggleToast={toggleToast}
+									setDeletedNav={setDeletedNav}
+									isSelected={isItemSelected}
+									onChange={addToBulkSelection}
+									handleClick={setContent}
+									setHistoryPush={setHistoryPush}
+									toggleReplaceModal={toggleReplaceModal}
+									hoverCheck={checkState.hoverCheck}
+								/>
+							);
+						})}
 					</TableList>
 				</S.TableWrapper>
 				{isVisible && <Toast {...toastProps} />}

package/src/modules/PageEditor/Editor/index.tsx

@@ -43,6 +43,8 @@ const Editor = (props: IProps) => {
 		content,
 		isEditLive,
 		isDisabled,
+		isDirty,
+		onNavigateWithDirty,
 	} = props;
 
 	if (!site) {
@@ -101,6 +103,8 @@ const Editor = (props: IProps) => {
 					footer={footer}
 					isEditLive={isEditLive}
 					isDisabled={isDisabled}
+					isDirty={isDirty}
+					onNavigateWithDirty={onNavigateWithDirty}
 				/>
 			}
 		/>
@@ -146,6 +150,8 @@ interface IPageBrowserDispatchProps {
 	browserRef: any;
 	isEditLive: boolean;
 	isDisabled: boolean;
+	isDirty?: boolean;
+	onNavigateWithDirty?: (navigateCallback: () => void) => void;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/PageEditor/index.tsx

@@ -93,6 +93,8 @@ const PageEditor = (props: IProps) => {
 	const { isOpen: isScheduleOpen, toggleModal: toggleScheduleModal } = useModal();
 	const { isOpen: isCancelScheduleOpen, toggleModal: toggleCancelScheduleModal } = useModal();
 	const { isOpen: isRestoreOpen, toggleModal: toggleRestoreModal } = useModal();
+	const { isOpen: isDirtyNavigateOpen, toggleModal: toggleDirtyNavigateModal } = useModal();
+	const [pendingNavigateCallback, setPendingNavigateCallback] = useState<(() => void) | null>(null);
 	const [errorPagesChecked, setErrorPagesChecked] = useState(false);
 	const browserRef = useRef<HTMLDivElement>(null);
 
@@ -616,6 +618,40 @@ const PageEditor = (props: IProps) => {
 		}
 	};
 
+	const onNavigateWithDirty = (navigateCallback: () => void) => {
+		setPendingNavigateCallback(() => navigateCallback);
+		toggleDirtyNavigateModal();
+	};
+
+	const handleConfirmDirtyNavigation = () => {
+		toggleDirtyNavigateModal();
+		if (pendingNavigateCallback) {
+			pendingNavigateCallback();
+			setPendingNavigateCallback(null);
+		}
+	};
+
+	const handleCancelDirtyNavigation = () => {
+		toggleDirtyNavigateModal();
+		setPendingNavigateCallback(null);
+	};
+
+	const dirtyNavigateModalText = (
+		<>
+			Some content <strong>is not saved</strong> on this page.
+		</>
+	);
+
+	const mainDirtyNavigateAction = {
+		title: "Yes, discard changes",
+		onClick: handleConfirmDirtyNavigation,
+	};
+
+	const secondaryDirtyNavigateAction = {
+		title: "Cancel",
+		onClick: handleCancelDirtyNavigation,
+	};
+
 	return isLoading ? (
 		<Loading />
 	) : (
@@ -642,6 +678,7 @@ const PageEditor = (props: IProps) => {
 				tabs={tabsPreview}
 				isDirty={isDirty}
 				scheduledPublication={editorContent?.publicationScheduled}
+				isSaving={isSaving}
 			>
 				{selectedTab === "edit" ? (
 					<>
@@ -693,6 +730,8 @@ const PageEditor = (props: IProps) => {
 								setNotification={setNotification}
 								isEditLive={isEditLive}
 								isDisabled={isDeleted}
+								isDirty={isDirty}
+								onNavigateWithDirty={onNavigateWithDirty}
 							/>
 						</S.Content>
 					</>
@@ -766,6 +805,19 @@ const PageEditor = (props: IProps) => {
 						restorePage: handleRestorePage,
 					}}
 				/>
+				<Modal
+					isOpen={isDirtyNavigateOpen}
+					hide={handleCancelDirtyNavigation}
+					size="S"
+					title="Unsaved changes"
+					mainAction={mainDirtyNavigateAction}
+					secondaryAction={secondaryDirtyNavigateAction}
+				>
+					<S.ModalContent>
+						{dirtyNavigateModalText} If you exit without saving it, it will be lost. Do you want to discard
+						your changes?
+					</S.ModalContent>
+				</Modal>
 			</MainWrapper>
 		</>
 	);

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

@@ -1,7 +1,8 @@
 import { BulkSelectionOptions } from "@ax/components";
+import { itemLabel } from "@ax/constants";
 import type { IQueryValue } from "@ax/types";
 
-import { IBulkSelectedItems } from "src/hooks/bulk";
+import type { IBulkSelectedItems } from "src/hooks/bulk";
 
 import TableHeader from "./TableHeader";
 
@@ -21,6 +22,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 		sortedListStatus,
 		setHoverCheck,
 		selectedItems,
+		isLoading,
 	} = props;
 
 	const bulkActions = [
@@ -38,6 +40,8 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			selectItems={selectItems}
 			totalItems={totalItems}
 			selectedItems={selectedItems}
+			isLoading={isLoading}
+			itemLabel={itemLabel.REDIRECT}
 		/>
 	) : (
 		<TableHeader
@@ -70,6 +74,7 @@ interface IProps {
 	sortedListStatus: { isAscending: boolean; sortedByDate: boolean };
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkHeader;

package/src/modules/Redirects/index.tsx

@@ -21,9 +21,10 @@ import BulkHeader from "./BulkHeader";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
 import RedirectItem from "./RedirectItem";
 import RedirectPanel from "./RedirectPanel";
-import * as S from "./style";
 import { getSortedListStatus } from "./utils";
 
+import * as S from "./style";
+
 const Redirects = (props: IProps): JSX.Element => {
 	const {
 		navItems,
@@ -45,6 +46,7 @@ const Redirects = (props: IProps): JSX.Element => {
 	const firstPage = 1;
 	const [page, setPage] = useState(1);
 	const [isScrolling, setIsScrolling] = useState(false);
+	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [isOpenedSecond, setIsOpenedSecond] = useState(false);
 	const { isOpen, toggleModal } = useModal();
 	const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
@@ -73,7 +75,7 @@ const Redirects = (props: IProps): JSX.Element => {
 
 	const [formValues, setFormValues] = useState<IRedirect>(initState);
 
-	const redIds = redirects && redirects.map((red: any) => red.id);
+	const redIds = redirects?.map((red: any) => red.id);
 
 	const getParams = useCallback(() => {
 		const params = {
@@ -127,11 +129,13 @@ const Redirects = (props: IProps): JSX.Element => {
 	} = useBulkSelection(redIds);
 
 	const bulkDelete = async () => {
+		setIsBulkLoading(true);
 		const deleted = await deleteRedirect(selectedItems.all);
 		if (deleted) {
 			toggleToast();
 		}
 		toggleModalDelete();
+		setIsBulkLoading(false);
 	};
 
 	const unselectAllItems = () => resetBulkSelection();
@@ -174,6 +178,7 @@ const Redirects = (props: IProps): JSX.Element => {
 			sortedListStatus={sortedListStatus}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
+			isLoading={isBulkLoading}
 		/>
 	);
 

package/src/modules/Settings/Integrations/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 => {
 		bulkActions,
 		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.ADDON}
 		/>
 	) : (
 		<TableHeader
@@ -52,6 +56,7 @@ interface IProps {
 	bulkActions: { icon: string; text: string; action: () => void }[];
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkHeader;

package/src/modules/Settings/Integrations/index.tsx

@@ -45,6 +45,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 		throw new Error(`ERROR: User reached Integrations with null site info`);
 	}
 
+	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [isScrolling, setIsScrolling] = useState(false);
 	const tableRef = useRef<HTMLDivElement>(null);
 	const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery, isFiltered } = useFilterQuery();
@@ -125,6 +126,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 	} = useBulkSelection(filteredIntegrationsIds);
 
 	const bulkDelete = async () => {
+		setIsBulkLoading(true);
 		const params = getParams();
 		const deleted = await deleteIntegration(selectedItems.all, params);
 		if (deleted) {
@@ -132,9 +134,11 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 		}
 		toggleModalDelete();
 		resetBulkSelection();
+		setIsBulkLoading(false);
 	};
 
 	const bulkDeactivate = async () => {
+		setIsBulkLoading(true);
 		const params = getParams();
 		const changed = await changeIntegrationState(selectedItems.all, false, params);
 		if (changed) {
@@ -142,6 +146,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 		}
 		toggleModalDeactivate();
 		resetBulkSelection();
+		setIsBulkLoading(false);
 	};
 
 	const unselectAllItems = () => resetBulkSelection();
@@ -185,6 +190,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 			bulkActions={bulkActions}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
+			isLoading={isBulkLoading}
 		/>
 	);
 
@@ -326,7 +332,7 @@ const mapStateToProps = (state: IRootState) => ({
 	isLoading: state.app.isLoading,
 	integrations: state.integrations.integrations,
 	totalItems: state.integrations.totalItems,
-	currentSite: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+	currentSite: state.sites.currentSiteInfo?.id ?? null,
 });
 
 const mapDispatchToProps = {

package/src/modules/Sites/SitesList/ListView/BulkHeader/index.tsx

@@ -1,4 +1,5 @@
 import { BulkSelectionOptions } from "@ax/components";
+import { itemLabel } from "@ax/constants";
 import type { IBulkSelectedItems } from "@ax/hooks";
 import { usePermission } from "@ax/hooks";
 import type { IQueryValue } from "@ax/types";
@@ -22,6 +23,7 @@ const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
 		filterValues,
 		setHoverCheck,
 		selectedItems,
+		isLoading,
 	} = props;
 
 	const allowedToPublishSite = usePermission("general.publishSite");
@@ -54,6 +56,8 @@ const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
 				selectItems={selectItems}
 				totalItems={totalItems}
 				selectedItems={selectedItems}
+				isLoading={isLoading}
+				itemLabel={itemLabel.SITE}
 			/>
 		</S.BulkWrapper>
 	) : (
@@ -85,6 +89,7 @@ export interface IBulkHeaderProps {
 	filterValues: Record<string, IQueryValue[]>;
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkHeader;