diff --git a/src/api/details.ts b/src/api/details.ts
index 6c3db4d..8a9e5ad 100644
--- a/src/api/details.ts
+++ b/src/api/details.ts
@@ -1,4 +1,4 @@
-import { Settings, getMapSettings } from './settings';
+import { getDetailsUrl } from './settings';
 
 async function fetchDetails(url: string) {
   const res = await fetch(`${process.env.apiHost}${url}`, {
@@ -11,18 +11,14 @@ async function fetchDetails(url: string) {
 }
 
 export async function getDetails(path: string, id: number) {
-  let settings = null;
+  let endpoint = '';
   try {
-    settings = (await getMapSettings()) as Settings['map'];
+    endpoint = await getDetailsUrl(path);
   } catch (error) {
     // notfound
     return null;
   }
-  const { url: endpoint } =
-    settings.layersTree
-      .flatMap(({ layers }) => layers)
-      .find(item => item.type === path) ?? {};
-  if (endpoint === undefined) {
+  if (endpoint === '') {
     return null;
   }
   let details = null;
diff --git a/src/api/fullsettings.ts b/src/api/fullsettings.ts
new file mode 100644
index 0000000..641167b
--- /dev/null
+++ b/src/api/fullsettings.ts
@@ -0,0 +1,39 @@
+import { getLocalettings } from './localSettings';
+import { Settings, fetchSettings } from './settings';
+
+export async function getSettings(): Promise<Settings | null> {
+  let rawSettings = null;
+  let customization = null;
+  try {
+    rawSettings = await fetchSettings();
+    customization = await getLocalettings();
+  } catch (error) {
+    throw error;
+  }
+  const {
+    map: {
+      baseLayers,
+      group,
+      bounds: [lat1, lng1, lat2, lng2],
+    },
+    flatpages,
+    ...settings
+  } = rawSettings;
+  return {
+    customization: {
+      ...settings,
+      ...customization,
+    },
+    flatpages,
+    map: {
+      baseLayers,
+      layersTree: group,
+      container: {
+        bounds: [
+          [lng1, lat1],
+          [lng2, lat2],
+        ],
+      },
+    },
+  };
+}
diff --git a/src/api/settings.ts b/src/api/settings.ts
index 5666800..d5fb879 100644
--- a/src/api/settings.ts
+++ b/src/api/settings.ts
@@ -3,9 +3,6 @@ import { FeatureCollection } from 'geojson';
 import { GeoJSONOptions, LatLngBoundsExpression } from 'leaflet';
 import slugify from 'slugify';
 
-import { getGeoJSON } from './geojson';
-import { getLocalettings } from './localSettings';
-
 export type Attachement = { thumbnail: string; url: string; title: string };
 
 type BaseLayers = {
@@ -152,7 +149,7 @@ export type Settings = {
   customization: LocalSettings;
 };
 
-async function fetchSettings(): Promise<RawSettings> {
+export async function fetchSettings(): Promise<RawSettings> {
   try {
     const res = await fetch(
       `${process.env.apiHost}/api/portal/fr/portal/${process.env.portal}/`,
@@ -172,79 +169,65 @@ async function fetchSettings(): Promise<RawSettings> {
   }
 }
 
-export async function getSettings(): Promise<Settings | null> {
-  let rawSettings = null;
-  let customization = null;
-  try {
-    rawSettings = await fetchSettings();
-    customization = await getLocalettings();
-  } catch (error) {
-    throw error;
-  }
+async function getRawMapSettings(): Promise<Settings['map']> {
+  const settings = await fetchSettings();
   const {
     map: {
       baseLayers,
       group,
       bounds: [lat1, lng1, lat2, lng2],
     },
-    flatpages,
-    ...settings
-  } = rawSettings;
+  } = settings;
+
   return {
-    customization: {
-      ...settings,
-      ...customization,
-    },
-    flatpages,
-    map: {
-      baseLayers,
-      layersTree: group,
-      container: {
-        bounds: [
-          [lng1, lat1],
-          [lng2, lat2],
-        ],
-      },
+    baseLayers,
+    layersTree: group,
+    container: {
+      bounds: [
+        [lng1, lat1],
+        [lng2, lat2],
+      ],
     },
-  };
+  } as Settings['map'];
 }
 
 export async function getMapSettings(): Promise<Settings['map'] | []> {
-  let settings = null;
+  let map = null;
   try {
-    settings = await getSettings();
+    map = await getRawMapSettings();
   } catch (error) {
     throw error;
   }
 
-  if (settings === null) {
+  if (map === null) {
     return [];
   }
+  return map;
+}
 
-  const { map } = settings;
-  const layersTree = await Promise.all(
-    map.layersTree.map(async item => ({
-      ...item,
-      layers: await Promise.all(
-        item.layers.map(async layer => {
-          if (layer.defaultActive === false) {
-            return layer;
-          }
-          return { ...layer, geojson: await getGeoJSON(layer.geojsonUrl) };
-        }),
-      ),
-    })),
-  );
-  return {
-    ...map,
-    layersTree,
-  };
+export async function getDetailsUrl(path: string): Promise<string> {
+  let map = null;
+  try {
+    map = await getRawMapSettings();
+  } catch (error) {
+    throw error;
+  }
+
+  if (map === null) {
+    return '';
+  }
+
+  const { url: endpoint = '' } =
+    map.layersTree
+      .flatMap(({ layers }) => layers)
+      .find(item => item.type === path) ?? {};
+  return endpoint;
 }
 
 export async function getMenuSettings(): Promise<Menu[]> {
   let settings = null;
   try {
-    settings = await getSettings();
+    settings = await fetchSettings();
   } catch (e) {
     throw e;
   }
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index a65e389..71f194f 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { notFound } from 'next/navigation';
-import { getMenuSettings, getSettings } from '@/api/settings';
+import { getSettings } from '@/api/fullsettings';
+import { getMenuSettings } from '@/api/settings';
 import { SettingsContextProvider } from '@/context/settings';
 import { NextIntlClientProvider, useLocale } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
diff --git a/src/app/[locale]/map/[details]/[id]/loading.tsx b/src/app/[locale]/map/[details]/[id]/loading.tsx
new file mode 100644
index 0000000..a541974
--- /dev/null
+++ b/src/app/[locale]/map/[details]/[id]/loading.tsx
@@ -0,0 +1,14 @@
+import { useTranslations } from 'next-intl';
+
+import { Icons } from '@/components/icons';
+
+export default function Loading() {
+  const t = useTranslations();
+  return (
+    <Icons.loading
+      className="m-auto h-8 w-8 animate-spin text-primary"
+      role="img"
+      aria-label={t('site.loading')}
+    />
+  );
+}
diff --git a/src/app/[locale]/map/layout.tsx b/src/app/[locale]/map/layout.tsx
index a379850..252a5e9 100644
--- a/src/app/[locale]/map/layout.tsx
+++ b/src/app/[locale]/map/layout.tsx
@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { Settings, getMapSettings } from '@/api/settings';
 import { MapContextProvider } from '@/context/map';
 import { getTranslations } from 'next-intl/server';
 
@@ -20,16 +19,8 @@ export const generateMetadata = async () => {
 };
 
 export default async function MapLayout({ children }: Props) {
-  let settings = null;
-
-  try {
-    settings = (await getMapSettings()) as Settings['map'];
-  } catch (error) {
-    throw error;
-  }
-
   return (
-    <MapContextProvider defaultSettings={settings}>
+    <MapContextProvider>
       <main
         role="main"
         className="grid h-full w-screen grid-cols-[100dvw_auto_100dvw] grid-rows-1 justify-stretch overflow-x-hidden scroll-smooth md:grid-cols-[50dvw_auto_50dvw] lg:grid-cols-[300px_auto_1fr]"
diff --git a/src/app/[locale]/page/[slug]/layout.tsx b/src/app/[locale]/page/[slug]/layout.tsx
index 3e98f83..2fb3a4b 100644
--- a/src/app/[locale]/page/[slug]/layout.tsx
+++ b/src/app/[locale]/page/[slug]/layout.tsx
@@ -17,7 +17,6 @@ type GenerateMetaDataProps = {
 export const generateMetadata = async ({
   params: { slug },
 }: GenerateMetaDataProps) => {
-  const t = await getTranslations('site');
   const content = await getPage(slug);
   if (content === null) {
     return;
diff --git a/src/components/map-filters.tsx b/src/components/map-filters.tsx
index 8e3f3df..5ec513d 100644
--- a/src/components/map-filters.tsx
+++ b/src/components/map-filters.tsx
@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useMapContext } from '@/context/map';
+import { useTranslations } from 'next-intl';
 
-import { getUrlSearchParamsForLayers, partition } from '@/lib/utils';
+import { partition } from '@/lib/utils';
 import {
   Accordion,
   AccordionContent,
@@ -14,29 +14,32 @@ import { Label } from './ui/label';
 import { Switch } from './ui/switch';
 
 export default function MapFilters() {
-  const { settings } = useMapContext();
-  const router = useRouter();
-  const pathname = usePathname();
-  const params = useSearchParams();
-  const layersFromParams = params.get('layers') ?? '';
+  const { settings, layers, toggleLayer } = useMapContext();
+  const t = useTranslations();
 
   const handleChange = useCallback(
     (id: number, isActive: boolean) => {
-      const nextLayerSearchParams = getUrlSearchParamsForLayers(
-        layersFromParams,
-        [id],
-        isActive,
-      );
-      const textFromParams = params.get('text')
-        ? `&text=${params.get('text')}`
-        : '';
-      router.push(`${pathname}${nextLayerSearchParams}${textFromParams}`);
+      toggleLayer(id, isActive);
     },
-    [layersFromParams, params, router, pathname],
+    [toggleLayer],
   );
 
-  if (settings === null || settings.layersTree.length === 0) {
-    return null;
+  if (
+    settings === null ||
+    settings.layersTree.length === 0 ||
+    layers === null
+  ) {
+    return (
+      <div className="bg-background px-3">
+        <p className="sr-only">{t('site.loading')}</p>
+        {Array.from({ length: 4 }, () => (
+          <div className="flex w-full justify-between border-b py-4 last:border-b-0">
+            <div className="skeleton-animation h-6 w-32 rounded"></div>
+            <div className="skeleton-animation h-6 w-12 rounded-xl"></div>
+          </div>
+        ))}
+      </div>
+    );
   }
 
   const [grouped, [notGrouped]] = partition(
@@ -44,10 +47,9 @@ export default function MapFilters() {
     layer => layer.label !== null,
   );
 
-  const defaultActivatedLayers = layersFromParams
-    .split(',')
-    .filter(Boolean)
-    .map(Number);
+  const activatedLayers = layers
+    .filter(({ isActive }) => isActive)
+    .map(({ id }) => id);
 
   return (
     <>
@@ -75,7 +77,11 @@ export default function MapFilters() {
                       </Label>
                       <Switch
                         id={`layerItem-${layer.id}`}
-                        checked={defaultActivatedLayers.includes(layer.id)}
+                        checked={activatedLayers.includes(layer.id)}
+                        isLoading={
+                          !layers.find(e => e.id === layer.id)?.geojson &&
+                          activatedLayers.includes(layer.id)
+                        }
                         onCheckedChange={isActive =>
                           handleChange(layer.id, isActive)
                         }
@@ -100,7 +106,11 @@ export default function MapFilters() {
               </Label>
               <Switch
                 id={`layerItem-${layer.id}`}
-                checked={defaultActivatedLayers.includes(layer.id)}
+                checked={activatedLayers.includes(layer.id)}
+                isLoading={
+                  !layers.find(e => e.id === layer.id)?.geojson &&
+                  activatedLayers.includes(layer.id)
+                }
                 onCheckedChange={isActive => handleChange(layer.id, isActive)}
               />
             </li>
diff --git a/src/components/metadata-list.tsx b/src/components/metadata-list.tsx
index 20ce88b..80c09b5 100644
--- a/src/components/metadata-list.tsx
+++ b/src/components/metadata-list.tsx
@@ -45,7 +45,7 @@ const MetadataItem = ({
     <div className="flex flex-row flex-wrap items-center justify-center gap-1">
       <dt>
         <Icon
-          className={cn('text-primary', small && 'w-4 h-4')}
+          className={cn('text-primary', small && 'h-4 w-4')}
           {...propsForSVGPresentation}
         />
         <span className="sr-only">{t(type)}</span>
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index 107f57e..2521f5c 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -2,28 +2,44 @@
 
 import * as React from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { useTranslations } from 'next-intl';
 
 import { cn } from '@/lib/utils';
 
+import { Icons } from '../icons';
+
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
+    isLoading?: boolean;
+  }
+>(({ className, isLoading, ...props }, ref) => {
+  const t = useTranslations();
+  return (
+    <SwitchPrimitives.Root
       className={cn(
-        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        className,
       )}
-    />
-  </SwitchPrimitives.Root>
-));
+      {...props}
+      ref={ref}
+    >
+      <SwitchPrimitives.Thumb
+        className={cn(
+          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        )}
+      >
+        {isLoading && (
+          <Icons.loading
+            className="h-full w-full animate-spin text-primary"
+            role="img"
+            aria-label={t('site.loading')}
+          />
+        )}
+      </SwitchPrimitives.Thumb>
+    </SwitchPrimitives.Root>
+  );
+});
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 export { Switch };
diff --git a/src/context/map.tsx b/src/context/map.tsx
index 24d30a8..03e62dd 100644
--- a/src/context/map.tsx
+++ b/src/context/map.tsx
@@ -8,14 +8,12 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
 import { getGeoJSON } from '@/api/geojson';
-import { Layer, Settings } from '@/api/settings';
+import { Layer, Settings, getMapSettings } from '@/api/settings';
 import { FeatureCollection, Point } from 'geojson';
 import { Map } from 'leaflet';
 
-import { getUrlSearchParamsForLayers, partition } from '@/lib/utils';
-
 type MapContextProps = {
   layers: Layer[] | null;
   map: Map | null;
@@ -29,7 +27,6 @@ type MapContextProps = {
 
 type MapContextProviderProps = {
   children: React.ReactNode;
-  defaultSettings: Settings['map'] | null;
 };
 
 export const MapContext = createContext<MapContextProps>({
@@ -45,25 +42,47 @@ export const MapContext = createContext<MapContextProps>({
 
 export const useMapContext = () => useContext(MapContext);
 
-export const MapContextProvider = ({
-  defaultSettings,
-  children,
-}: MapContextProviderProps) => {
-  const router = useRouter();
-  const pathname = usePathname();
+export const MapContextProvider = ({ children }: MapContextProviderProps) => {
   const params = useSearchParams();
   const layersFromParams = params.get('layers') ?? '';
 
+  const [defaultSettings, setDefaultSettings] = useState<
+    Settings['map'] | null
+  >(null);
+
+  // Fetch settings on first render
+  useEffect(() => {
+    (getMapSettings() as Promise<Settings['map']>).then(settings =>
+      setDefaultSettings(settings),
+    );
+  }, []);
+
   const settings = useMemo(
     () => defaultSettings?.layersTree.flatMap(group => group.layers) ?? null,
-    [defaultSettings?.layersTree],
+    [defaultSettings],
   );
 
-  const [layers, setLayers] = useState<Layer[] | null>(
-    () =>
-      settings?.map(item => ({ ...item, isActive: item.defaultActive })) ??
-      null,
-  );
+  const [layers, setLayers] = useState<Layer[] | null>(null);
+
+  // When settings are loaded, initialize layers
+  useEffect(() => {
+    if (layersFromParams !== '') {
+      // if there's layers in the URL, those are the active ones
+      setLayers(
+        settings?.map(item => ({
+          ...item,
+          isActive: layersFromParams.split(',').map(Number).includes(item.id),
+        })) ?? null,
+      );
+    } else {
+      // If not, just use the default ones
+      setLayers(
+        settings?.map(item => ({ ...item, isActive: item.defaultActive })) ??
+          null,
+      );
+    }
+  }, [settings, layersFromParams]);
+
   const [map, setMap] = useState<Map | null>(null);
   const [observationCoordinates, setObservationCoordinates] =
     useState<Point | null>(null);
@@ -82,64 +101,70 @@ export const MapContextProvider = ({
       if (currentLayer.isActive === isActive) {
         return;
       }
+
+      setLayers(
+        prevLayers =>
+          prevLayers?.map(layer => {
+            if (layer.id === currentLayer.id) {
+              return { ...layer, isActive };
+            }
+            return layer;
+          }) ?? [],
+      );
+
+      if (currentLayer.geojson) return;
+
       const geojson =
         currentLayer.geojson ?? (await getGeoJSON(currentLayer.geojsonUrl));
-      setLayers(prevLayers => {
-        if (prevLayers === null) {
-          return prevLayers;
-        }
 
-        return prevLayers.reduce((list: Layer[], layer) => {
-          const { defaultActive, ...nextLayer } = layer;
-          if (nextLayer.id !== id) {
-            list.push(nextLayer);
-          } else {
-            list.push({
-              ...nextLayer,
-              isActive,
-              geojson: geojson as FeatureCollection,
-            });
-          }
-          return list;
-        }, []);
-      });
+      setLayers(
+        prevLayers =>
+          prevLayers?.map(layer => {
+            if (layer.id === currentLayer.id) {
+              return { ...layer, geojson: geojson as FeatureCollection };
+            }
+            return layer;
+          }) ?? [],
+      );
     },
     [getLayerById],
   );
 
+  // When active layers are changed, fetch the geojson
   useEffect(() => {
-    if (
-      layersFromParams === '' &&
-      layers?.some(item => 'defaultActive' in item)
-    ) {
-      const layersID = layers
-        .filter(item => item.defaultActive)
-        .map(({ id }) => id);
-      const nextLayerSearchParams = getUrlSearchParamsForLayers(
-        layersFromParams,
-        layersID,
-        true,
-      );
-      const text = params.get('text');
-      router.replace(
-        `${pathname}${nextLayerSearchParams}${
-          text ? `&text=${encodeURIComponent(text)}` : ''
-        }`,
-      );
-    }
-  }, [layers, layersFromParams, params, pathname, router]);
+    layers
+      ?.filter(({ isActive }) => isActive)
+      .forEach(async currentLayer => {
+        if (!currentLayer.geojson) {
+          const geojson = await getGeoJSON(currentLayer.geojsonUrl);
+          setLayers(
+            prevLayers =>
+              prevLayers?.map(layer => {
+                if (layer.id === currentLayer.id) {
+                  return { ...layer, geojson: geojson as FeatureCollection };
+                }
+                return layer;
+              }) ?? [],
+          );
+        }
+      });
+  }, [layers]);
 
+  // Update URL when active layers are changed
   useEffect(() => {
-    const [activatedLayers, disabledLayers] = partition(layers ?? [], item =>
-      layersFromParams.split(',').map(Number).includes(item.id),
+    const textFromParams = params.get('text')
+      ? `&text=${params.get('text')}`
+      : '';
+    const nextLayerSearchParams = `?layers=${layers
+      ?.filter(({ isActive }) => isActive)
+      .map(({ id }) => id)
+      .join(',')}`;
+    window.history.pushState(
+      null,
+      '',
+      `${nextLayerSearchParams}${textFromParams}`,
     );
-    activatedLayers.forEach(item => toggleLayer(item.id, true));
-    disabledLayers.forEach(item => toggleLayer(item.id, false));
-  }, [layers, layersFromParams, toggleLayer]);
-
-  if (!defaultSettings && !layers) {
-    return null;
-  }
+  }, [layers, params]);
 
   return (
     <MapContext.Provider
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a480baf..6016d38 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -132,3 +132,23 @@ just hide all tooltips that aren't the last one
 .leaflet-tooltip-pane > .leaflet-tooltip:not(:last-child) {
   display: none;
 }
+
+
+.skeleton-animation {
+  background: linear-gradient(90deg, hsl(var(--muted-foreground)) 0%, hsl(var(--foreground)) 50%, hsl(var(--muted-foreground)) 100%);
+  background-size: 300% 100%;
+  opacity: 0.2;
+  animation: skeletonator 4s ease infinite;
+}
+
+@keyframes skeletonator {
+  0% {
+    background-position-x: 0%;
+  }
+  50% {
+    background-position-x: 100%;
+  }
+  100% {
+    background-position-x: 0%;
+  }
+}
diff --git a/translations/fr.json b/translations/fr.json
index fa58182..02ee7c0 100644
--- a/translations/fr.json
+++ b/translations/fr.json
@@ -86,7 +86,8 @@
     "menu": "Menu",
     "openMenu": "Ouvrir le menu",
     "prev": "Précédent",
-    "next": "Suivant"
+    "next": "Suivant",
+    "loading": "Chargement"
   },
   "theme": {
     "toggle": "Thème {theme}",