⚡️(frontend) reduce unblocking time for config

We will serve the config from the cache if available
in waiting for the config to be loaded.
It will remove the loading time for the config except
when the config is not available in the cache.

Author: AntoLC

CHANGELOG.md

@@ -13,6 +13,9 @@ and this project adheres to
 - 🚸(backend) make document search on title accent-insensitive #874
 - 🚩 add homepage feature flag #861
 
+## Changed
+
+⚡️(frontend) reduce unblocking time for config #867
 
 ## [3.1.0] - 2025-04-07
 

src/frontend/apps/impress/src/core/config/api/useConfig.tsx

@@ -19,22 +19,47 @@ interface ConfigResponse {
   SENTRY_DSN?: string;
 }
 
+const LOCAL_STORAGE_KEY = 'docs_config';
+
+function getCachedTranslation() {
+  try {
+    const jsonString = localStorage.getItem(LOCAL_STORAGE_KEY);
+    return jsonString ? (JSON.parse(jsonString) as ConfigResponse) : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function setCachedTranslation(translations: ConfigResponse) {
+  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(translations));
+}
+
 export const getConfig = async (): Promise<ConfigResponse> => {
   const response = await fetchAPI(`config/`);
 
   if (!response.ok) {
     throw new APIError('Failed to get the doc', await errorCauses(response));
   }
 
-  return response.json() as Promise<ConfigResponse>;
+  const config = response.json() as Promise<ConfigResponse>;
+  setCachedTranslation(await config);
+
+  return config;
 };
 
 export const KEY_CONFIG = 'config';
 
 export function useConfig() {
-  return useQuery<ConfigResponse, APIError, ConfigResponse>({
+  const cachedData = getCachedTranslation();
+  const oneHour = 1000 * 60 * 60;
+
+  const response = useQuery<ConfigResponse, APIError, ConfigResponse>({
     queryKey: [KEY_CONFIG],
     queryFn: () => getConfig(),
-    staleTime: Infinity,
+    initialData: cachedData,
+    staleTime: oneHour,
+    initialDataUpdatedAt: Date.now() - oneHour, // Force initial data to be considered stale
   });
+
+  return response;
 }

src/frontend/apps/impress/src/features/language/hooks/useLanguageSynchronizer.ts

@@ -16,7 +16,7 @@ export const useLanguageSynchronizer = () => {
 
   const availableBackendLanguages = useMemo(() => {
     return conf?.LANGUAGES.map(([locale]) => locale);
-  }, [conf]);
+  }, [conf?.LANGUAGES]);
 
   const synchronizeLanguage = useCallback(
     async (direction?: 'toBackend' | 'toFrontend') => {