From 3bf33d202a8870d57dc631b6565a22d4af4df16b Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 22 Apr 2025 11:23:55 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20reduce=20unblock?=
 =?UTF-8?q?ing=20time=20for=20config?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 CHANGELOG.md                                  |  3 ++
 .../impress/src/core/config/api/useConfig.tsx | 31 +++++++++++++++++--
 .../language/hooks/useLanguageSynchronizer.ts |  2 +-
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40e36bf1..a7819716 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/frontend/apps/impress/src/core/config/api/useConfig.tsx b/src/frontend/apps/impress/src/core/config/api/useConfig.tsx
index aa364877..03c43fea 100644
--- a/src/frontend/apps/impress/src/core/config/api/useConfig.tsx
+++ b/src/frontend/apps/impress/src/core/config/api/useConfig.tsx
@@ -19,6 +19,21 @@ 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/`);
 
@@ -26,15 +41,25 @@ export const getConfig = async (): Promise<ConfigResponse> => {
     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;
 }
diff --git a/src/frontend/apps/impress/src/features/language/hooks/useLanguageSynchronizer.ts b/src/frontend/apps/impress/src/features/language/hooks/useLanguageSynchronizer.ts
index 536e2e72..e6bb23b9 100644
--- a/src/frontend/apps/impress/src/features/language/hooks/useLanguageSynchronizer.ts
+++ b/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') => {