fix

client/src/components/center-calendar/CenterCalendar.js

@@ -145,6 +145,7 @@ const EventsCalendar = () => {
 	const [loadingProgress, setLoadingProgress] = useState(12);
 	const [initialLookupsLoaded, setInitialLookupsLoaded] = useState(false);
 	const [initialEventsLoaded, setInitialEventsLoaded] = useState(false);
+	const [isTabTransitionLoading, setIsTabTransitionLoading] = useState(false);
 	const hasMarkedInitialEventsLoadedRef = useRef(false);
   const visibleCalendarTabs = calendarTabOrder.filter((tabKey) => AuthService.canViewCalendarTab(tabKey) || AuthService.canEditCalendarTab(tabKey));
   const canEditCurrentTab = () => AuthService.canEditCalendarTab(currentTab);
@@ -461,6 +462,16 @@ const EventsCalendar = () => {
 		return () => clearTimeout(closeTimer);
 	}, [initialLookupsLoaded, initialEventsLoaded]);
 
+	useEffect(() => {
+		if (!isTabTransitionLoading) return;
+		setLoadingProgress(100);
+		const closeTimer = setTimeout(() => {
+			setShowSpinner(false);
+			setIsTabTransitionLoading(false);
+		}, 220);
+		return () => clearTimeout(closeTimer);
+	}, [events, isTabTransitionLoading]);
+
 	// Auto-fill repeat start date from event date when repeat option is selected (new modal)
 	useEffect(() => {
 		if (newEventRecurring && newEventStartDateTime) {
@@ -984,6 +995,11 @@ const EventsCalendar = () => {
 
 	const goToTab = (value) => {
     if (!value || !visibleCalendarTabs.includes(value)) return;
+		if (value !== currentTab) {
+			setIsTabTransitionLoading(true);
+			setShowSpinner(true);
+			setLoadingProgress(65);
+		}
 		setTargetedEventType(eventTypeMap[value]);
 		setCurrentTab(value);
 		currentTabRef.current = value;
@@ -1010,8 +1026,14 @@ const EventsCalendar = () => {
 			calendar?.config?.plugins?.eventModal?.close();
 		} catch (_e) {}
 		setTimeout(() => {
-			document.querySelectorAll('[class*="sx__event-modal"]').forEach(el => el.remove());
-			document.querySelectorAll('[class*="event-modal"]').forEach(el => el.remove());
+			document.querySelectorAll('.sx__event-modal').forEach((el) => {
+				const dialogContainer = el.closest('[role="dialog"]');
+				if (dialogContainer) {
+					dialogContainer.remove();
+				} else {
+					el.remove();
+				}
+			});
 		}, 0);
 	};
 
@@ -1024,7 +1046,6 @@ const EventsCalendar = () => {
 					<button
 						type="button"
 						onClick={dismissEventModal}
-						onMouseDown={dismissEventModal}
 						aria-label="Close"
 						title="Close"
 						data-custom-close="true"

client/src/components/events/EventsCalendar.js

@@ -412,8 +412,14 @@ const EventsCalendar = () => {
 			calendar?.config?.plugins?.eventModal?.close();
 		} catch (_e) {}
 		setTimeout(() => {
-			document.querySelectorAll('[class*="sx__event-modal"]').forEach(el => el.remove());
-			document.querySelectorAll('[class*="event-modal"]').forEach(el => el.remove());
+			document.querySelectorAll('.sx__event-modal').forEach((el) => {
+				const dialogContainer = el.closest('[role="dialog"]');
+				if (dialogContainer) {
+					dialogContainer.remove();
+				} else {
+					el.remove();
+				}
+			});
 		}, 0);
 	};
 
@@ -425,7 +431,6 @@ const EventsCalendar = () => {
 					<button
 						type="button"
 						onClick={dismissEventModal}
-						onMouseDown={dismissEventModal}
 						aria-label="Close"
 						title="Close"
 						data-custom-close="true"