Indicate if language change is loading

src/components/i18n/AppIntlProvider.tsx

-import { useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { IntlProvider } from "react-intl";
 import type { WithChildren } from "../../utils/types";
 import Logger from "../../Logger";
@@ -7,6 +7,7 @@ import LoadingIndicator from "../widgets/LoadingIndicator";
 import Events from "../../data/events/Events";
 import { EventTypes } from "../../data/events/eventTypes";
 import useEvents from "../../data/events/useEvents";
+import Overlay from "../widgets/Overlay";
 
 const TAG = "AppIntlProvider";
 
@@ -14,21 +15,22 @@ export type IntlMessageMap = Record<string, string>;
 
 export default function AppIntlProvider({ children }: WithChildren) {
 	const language = useLanguageStore(s => s.language);
-	const previousLanguage = useRef<string | null>(null);
 	const [messages, setMessages] = useState<IntlMessageMap | null>(null);
+	const [isLoading, setLoading] = useState<boolean>(false);
 
 	useEvents(data => {
 		switch (data.type) {
 			case EventTypes.LANGUAGE_LOAD_SUCCESS:
 				setMessages(data.language);
+				setLoading(false);
 				break;
 		}
 	});
 
-	if (language !== previousLanguage.current) {
-		previousLanguage.current = language;
+	useEffect(() => {
 		loadLanguage(language);
-	}
+		setLoading(true);
+	}, [language]);
 
 	if (!messages) {
 		return <LoadingIndicator className="font-bold text-2xl mt-16">Loading…</LoadingIndicator>;
@@ -37,6 +39,9 @@ export default function AppIntlProvider({ children }: WithChildren) {
 	return (
 		<IntlProvider locale={language} messages={messages}>
 			{children}
+			<Overlay isVisible={isLoading}>
+				<LoadingIndicator className="font-bold text-2xl">Loading Language…</LoadingIndicator>
+			</Overlay>
 		</IntlProvider>
 	);
 }
@@ -47,6 +52,8 @@ export function preloadActiveLanguage() {
 
 function loadLanguage(lang: string) {
 	loadLanguageFile(lang)
+		// TODO debug
+		// .then(l => new Promise<IntlMessageMap>(r => setTimeout(() => r(l), 2000)))
 		.then(language => Events.emit(EventTypes.LANGUAGE_LOAD_SUCCESS, { language }))
 		.catch(error => {
 			Events.emit(EventTypes.LANGUAGE_LOAD_FAIL, { error: error as Error });

src/components/widgets/Overlay.tsx

+import type { WithChildren } from "../../utils/types";
+import classNames from "classnames";
+import { Z_INDEXES } from "../../constants";
+
+interface Props {
+	isVisible: boolean;
+}
+
+export default function Overlay({ isVisible, children }: WithChildren<Props>) {
+	return (
+		<div
+			className={classNames(
+				"fixed inset-0 bg-black/75 text-white grid place-items-center transition-opacity text-2xl",
+				{
+					"opacity-0 pointer-events-none": !isVisible,
+					"opacity-100": isVisible,
+				}
+			)}
+			style={{
+				zIndex: Z_INDEXES.GLOBAL_OVERLAY,
+			}}>
+			{children}
+		</div>
+	);
+}

src/constants.ts

@@ -16,7 +16,9 @@ export const STYLES = {
 
 export const NO_BREAK_SPACE = "\u00a0";
 
-export const Z_INDEXES = {};
+export const Z_INDEXES = {
+	GLOBAL_OVERLAY: 10000,
+};
 
 export const API_OAUTH_AUTHORIZE_URL = (type: string) =>
 	`${API_BASE_URL}/auth/${type}/authorize?redirect_uri=${encodeURIComponent(`${APP_BASE_URL}/auth/${type}/callback`)}`;