Paused useless animations

src/app/carte-base-adresse-nationale/components/Map/MapPlaceholder.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import styled, { css, keyframes } from 'styled-components'
+
+const bgColor = `var(--background-default-grey)`
+const bgColorMain = `var(--text-default-grey)`
+
+const INIT_BG_SIZE = '40%'
+
+const animate = keyframes`
+  0%, 100% {
+    background-position: left top;
+    background-size: ${INIT_BG_SIZE};
+  }
+  25%{
+    background-position: right bottom;
+    background-size: 60%;
+   }
+  50% {
+    background-position: left bottom;
+    background-size: 50%;
+  }
+  75% {
+    background-position: right top;
+    background-size: 35%;
+  }
+`
+
+const MapPlaceholder = styled.div`
+  flex: 1;
+  background-color: ${bgColor};
+  background: url('/img/map-bg-pattern.svg'),
+    radial-gradient(circle, transparent 20%, ${bgColor} 20%, ${bgColor} 80%, transparent 80%, transparent),
+    radial-gradient(circle, transparent 20%, ${bgColor} 20%, ${bgColor} 80%, transparent 80%, transparent) 27.5px 27.5px,
+    linear-gradient(${bgColorMain} 2.2px, transparent 2.2px) 0 -1.1px,
+    linear-gradient(90deg, ${bgColorMain} 2.2px, ${bgColor} 2.2px) -1.1px 0;
+  background-image: url('/img/map-bg-pattern.svg');
+  background-size: ${INIT_BG_SIZE},  55px, 55px 55px, 27.5px 27.5px, 27.5px 27.5px;
+  animation: ${animate} 20s ease-in-out 5 1s;
+  animation-play-state: paused;
+  
+  &.loading {
+    animation-play-state: running;
+  }
+  
+`
+
+export default MapPlaceholder

src/app/carte-base-adresse-nationale/layout.styles.tsx

@@ -1,28 +1,9 @@
 'use client'
 
-import styled, { css, keyframes } from 'styled-components'
+import styled, { css } from 'styled-components'
 
 const INIT_BG_SIZE = '40%'
 
-const animate = keyframes`
-  0%, 100% {
-    background-position: left top;
-    background-size: ${INIT_BG_SIZE};
-  }
-  25%{
-    background-position: right bottom;
-    background-size: 60%;
-   }
-  50% {
-    background-position: left bottom;
-    background-size: 50%;
-  }
-  75% {
-    background-position: right top;
-    background-size: 35%;
-  }
-`
-
 export const CartoWrapper = styled.div`
   position: relative;
   display: flex;
@@ -93,21 +74,6 @@ export const CartoMenu = styled.div`
 
 export const CartoMenuWrapper = styled.div.attrs({ className: 'layer' })``
 
-const bgColor = `var(--background-default-grey)`
-const bgColorMain = `var(--text-default-grey)`
-export const CartoBody = styled.div`
-  flex: 1;
-  background-color: ${bgColor};
-  background: url('/img/map-bg-pattern.svg'),
-    radial-gradient(circle, transparent 20%, ${bgColor} 20%, ${bgColor} 80%, transparent 80%, transparent),
-    radial-gradient(circle, transparent 20%, ${bgColor} 20%, ${bgColor} 80%, transparent 80%, transparent) 27.5px 27.5px,
-    linear-gradient(${bgColorMain} 2.2px, transparent 2.2px) 0 -1.1px,
-    linear-gradient(90deg, ${bgColorMain} 2.2px, ${bgColor} 2.2px) -1.1px 0;
-  background-image: url('/img/map-bg-pattern.svg');
-  background-size: ${INIT_BG_SIZE},  55px, 55px 55px, 27.5px 27.5px, 27.5px 27.5px;
-  animation: ${animate} 20s ease-in-out 5 1s;
-`
-
 // ---------------------------
 // --- Map Legend & Config ---
 // ---------------------------

src/app/carte-base-adresse-nationale/layout.tsx

@@ -15,7 +15,6 @@ import { PublicEnvScript } from 'next-runtime-env'
 import {
   CartoWrapper,
   CartoMenu,
-  CartoBody,
   MapParamsWrapper,
   RingButtonStyled,
   LegendList,
@@ -82,10 +81,7 @@ function Carto({ children }: { children: JSX.Element }) {
           </LegendList>
         </Legend>
       </CartoMenu>
-
-      <CartoBody>
-        { children }
-      </CartoBody>
+      { children }
     </CartoWrapper>
   )
 }

src/app/carte-base-adresse-nationale/page.tsx

@@ -10,6 +10,7 @@ import { getBanItem } from '@/lib/api-ban'
 
 import Aside from './components/Aside'
 import LoadingBar from './components/LoadingBar'
+import MapPlaceholder from './components/Map/MapPlaceholder'
 import { PanelAddressHeader, PanelAddress, PanelAddressFooter } from './components/PanelAddress'
 import { PanelMicroToponymHeader, PanelMicroToponym, PanelMicroToponymFooter } from './components/PanelMicroToponym'
 import { PanelDistrictHeader, PanelDistrict, PanelDistrictFooter } from './components/PanelDistrict'
@@ -184,6 +185,7 @@ function CartoView() {
   return (
     <MapProvider>
       <LoadingBar $isLoading={isLoadMapSearchResults || isLoadMapTiles} />
+      <MapPlaceholder className={`${isMapReady ? '' : 'loading'}`} />
       <Map
         ref={banMapRef}
         id="banMapGL"

src/components/SearchBAN/search-input/SearchInput.styles.tsx

@@ -25,18 +25,19 @@ export const SearchComboboxInputLoader = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  opacity: 0;
   transform: translateX(-1.5em);
-  transition: opacity 0.25s ease .25s;
-
-  &.loading {
-    opacity: 1;
-    transition: opacity 0.25s ease;
-  }
 
   .search-combobox-input-loader-icon {
     animation:${rotate} 2s infinite;
     animation-timing-function: cubic-bezier(0.25, 0.5, 0.25, 0.5);
+    opacity: 0;
+    animation-play-state: paused;
+    transition: opacity 0.25s ease;
+
+    &.active {
+      opacity: 1;
+      animation-play-state: running;
+    }
   }
 `
 

src/components/SearchBAN/search-input/SearchInput.tsx

@@ -129,8 +129,8 @@ export default function SearchInput({
       {children && <label {...getLabelProps()}>{children}</label>}
 
       <SearchComboboxInputWrapper>
-        <SearchComboboxInputLoader className={`${hasLoader && isLoading ? 'loading' : ''}`}>
-          <i className="search-combobox-input-loader-icon ri-refresh-line" />
+        <SearchComboboxInputLoader>
+          <i className={`search-combobox-input-loader-icon ri-refresh-line ${isLoading ? 'active' : ''}`} />
         </SearchComboboxInputLoader>
 
         <Input