Rewrite usage of loading spinner

frontend/package.json

@@ -69,7 +69,6 @@
     "react-leaflet": "3.1.0",
     "react-leaflet-markercluster": "^3.0.0-rc1",
     "react-leaflet-textpath": "2.1.0",
-    "react-loader": "^2.4.7",
     "react-media-hook": "^0.5.0",
     "react-select": "^5.4.0",
     "react-slick": "0.28.1",

frontend/src/components/Layout/Layout.tsx

@@ -1,24 +1,17 @@
 import { Header } from 'components/Header';
 import ConditionallyRender from 'components/ConditionallyRender';
-import { colorPalette, zIndex } from 'stylesheet';
-import Loader from 'react-loader';
+import Loader from 'components/Loader';
 import { useNavigationLoader } from './useRedirection';
 
 export const Layout: React.FC = ({ children }) => {
   const { isNavigationLoading } = useNavigationLoader();
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col min-h-full">
       <Header />
-      <main className="flex-grow">
+      <main className="relative flex-grow">
         <ConditionallyRender client>
-          <Loader
-            loaded={!isNavigationLoading}
-            options={{
-              color: colorPalette.primary1,
-              zIndex: zIndex.loader,
-            }}
-          >
+          <Loader loaded={!isNavigationLoading} className="z-loader absolute inset-0">
             {children}
           </Loader>
         </ConditionallyRender>

frontend/src/components/Loader/Loader.style.ts

@@ -1,97 +1,76 @@
 import styled, { keyframes } from 'styled-components';
-import { colorPalette } from 'stylesheet';
 
+// Loader from https://loading.io/css/
 const loaderAnimation = keyframes`
-  0%, 20%, 80%, 100% {
-    transform: scale(1);
+  0% {
+    opacity: 1;
   }
-  50% {
-    transform: scale(1.5);
+  100% {
+    opacity: 0;
   }
 `;
-
-export const LoaderWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-// Loader from https://loading.io/css/
-export const LoaderContainer = styled.div`
-  display: inline-block;
-  position: relative;
-  width: 64px;
-  height: 64px;
-`;
-
 export const Dot = styled.div`
-  position: absolute;
-  width: 5px;
-  height: 5px;
-  background: ${colorPalette.primary3};
-  border-radius: 50%;
+  transform-origin: 30px 30px;
   animation: ${loaderAnimation} 1.2s linear infinite;
 
+  &::after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    top: 6px;
+    left: 28px;
+    width: 5px;
+    height: 12px;
+    border-radius: 20%;
+    background: currentColor;
+  }
+
   :nth-child(1) {
-    animation-delay: 0s;
-    top: 29px;
-    left: 53px;
+    transform: rotate(0deg);
+    animation-delay: -1.1s;
   }
   :nth-child(2) {
-    animation-delay: -0.1s;
-    top: 18px;
-    left: 50px;
+    transform: rotate(30deg);
+    animation-delay: -1s;
   }
   :nth-child(3) {
-    animation-delay: -0.2s;
-    top: 9px;
-    left: 41px;
+    transform: rotate(60deg);
+    animation-delay: -0.9s;
   }
   :nth-child(4) {
-    animation-delay: -0.3s;
-    top: 6px;
-    left: 29px;
+    transform: rotate(90deg);
+    animation-delay: -0.8s;
   }
   :nth-child(5) {
-    animation-delay: -0.4s;
-    top: 9px;
-    left: 18px;
+    transform: rotate(120deg);
+    animation-delay: -0.7s;
   }
   :nth-child(6) {
-    animation-delay: -0.5s;
-    top: 18px;
-    left: 9px;
+    transform: rotate(150deg);
+    animation-delay: -0.6s;
   }
   :nth-child(7) {
-    animation-delay: -0.6s;
-    top: 29px;
-    left: 6px;
+    transform: rotate(180deg);
+    animation-delay: -0.5s;
   }
   :nth-child(8) {
-    animation-delay: -0.7s;
-    top: 41px;
-    left: 9px;
+    transform: rotate(210deg);
+    animation-delay: -0.4s;
   }
   :nth-child(9) {
-    animation-delay: -0.8s;
-    top: 50px;
-    left: 18px;
+    transform: rotate(240deg);
+    animation-delay: -0.3s;
   }
   :nth-child(10) {
-    animation-delay: -0.9s;
-    top: 53px;
-    left: 29px;
+    transform: rotate(270deg);
+    animation-delay: -0.2s;
   }
   :nth-child(11) {
-    animation-delay: -1s;
-    top: 50px;
-    left: 41px;
+    transform: rotate(300deg);
+    animation-delay: -0.1s;
   }
   :nth-child(12) {
-    animation-delay: -1.1s;
-    top: 41px;
-    left: 50px;
+    transform: rotate(330deg);
+    animation-delay: 0s;
   }
 `;

frontend/src/components/Loader/Loader.tsx

@@ -1,23 +1,38 @@
-import { Dot, LoaderContainer, LoaderWrapper } from './Loader.style';
+import { FormattedMessage } from 'react-intl';
+import { Dot } from './Loader.style';
+
+type LoaderProps = {
+  className?: string;
+  children?: React.ReactNode;
+  loaded?: boolean;
+};
 
 // Loader from https://loading.io/css/
-const Loader: React.FC = () => (
-  <LoaderWrapper>
-    <LoaderContainer>
-      <Dot />
-      <Dot />
-      <Dot />
-      <Dot />
-      <Dot />
-      <Dot />
-      <Dot />
-      <Dot />
-      <Dot />
-      <Dot />
-      <Dot />
-      <Dot />
-    </LoaderContainer>
-  </LoaderWrapper>
-);
+const Loader: React.FC<LoaderProps> = ({ className = '', loaded = false, children = '' }) => {
+  if (loaded === true) {
+    return <>{children}</>;
+  }
+  return (
+    <div className={`flex w-full h-full justify-center items-center text-primary1 ${className}`}>
+      <p className="sr-only" aria-live="polite">
+        <FormattedMessage id="loading" />
+      </p>
+      <div className="relative inline-block w-15 h-15">
+        <Dot />
+        <Dot />
+        <Dot />
+        <Dot />
+        <Dot />
+        <Dot />
+        <Dot />
+        <Dot />
+        <Dot />
+        <Dot />
+        <Dot />
+        <Dot />
+      </div>
+    </div>
+  );
+};
 
 export default Loader;

frontend/src/components/Map/components/Popup/index.tsx

@@ -3,7 +3,7 @@ import { routes } from 'services/routes';
 import styled, { css } from 'styled-components';
 import { Popup as LeafletPopup, Tooltip as LeafletTooltip } from 'react-leaflet';
 import { FormattedMessage } from 'react-intl';
-import Loader from 'react-loader';
+import Loader from 'components/Loader';
 
 import { colorPalette, desktopOnly, getSpacing } from 'stylesheet';
 import { textEllipsisAfterNLines } from 'services/cssHelpers';
@@ -39,12 +39,7 @@ const PopupContent: React.FC<PropsPC> = ({ showButton, id, type, parentId }) =>
   const { isLoading, trekPopupResult } = usePopupResult(id.toString(), true, type);
 
   return (
-    <Loader
-      loaded={!isLoading}
-      options={{
-        color: colorPalette.primary1,
-      }}
-    >
+    <Loader className="absolute inset-0" loaded={!isLoading}>
       {trekPopupResult && (
         <div className="flex flex-col">
           <CoverImage src={trekPopupResult.imgUrl} />

frontend/src/components/Report/Report.tsx

@@ -3,12 +3,11 @@ import InputRow from 'components/InputRow';
 import TextareaRow from 'components/TextareaRow';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import Loader from 'react-loader';
+import Loader from 'components/Loader';
 
 import { SelectableDropdown } from 'components/pages/search/components/FilterBar/SelectableDropdown';
 import useReport from 'components/Report/useReport';
 import { useMediaPredicate } from 'react-media-hook';
-import styled from 'styled-components';
 import { useDetailsAndMapContext } from 'components/pages/details/DetailsAndMapContext';
 import { Arrow } from 'components/Icons/Arrow';
 import { getFooterConfig } from 'components/Footer/useFooter';
@@ -62,7 +61,7 @@ const Report: React.FC<Props> = ({ displayMobileMap, startPoint, trekId }) => {
   };
 
   return (
-    <ReportWrapper>
+    <>
       <div className="flex gap-5 items-center mb-5">
         <p className="text-lg">
           <FormattedMessage id={'report.intro'} />
@@ -218,16 +217,8 @@ const Report: React.FC<Props> = ({ displayMobileMap, startPoint, trekId }) => {
           )}
         </Loader>
       )}
-    </ReportWrapper>
+    </>
   );
 };
 
-const ReportWrapper = styled.div`
-  position: relative;
-  z-index: 0;
-  > .loader {
-    min-height: 80px;
-  }
-`;
-
 export default Report;

frontend/src/components/pages/details/Details.tsx

@@ -1,7 +1,7 @@
 import MoreLink from 'components/Information/MoreLink';
 import { Layout } from 'components/Layout/Layout';
 import { Modal } from 'components/Modal';
-import Loader from 'react-loader';
+import Loader from 'components/Loader';
 
 import parse from 'html-react-parser';
 import { FormattedMessage } from 'react-intl';
@@ -11,7 +11,7 @@ import { OpenMapButton } from 'components/OpenMapButton';
 import { MobileMapContainer } from 'components/pages/search';
 import { useShowOnScrollPosition } from 'hooks/useShowOnScrollPosition';
 import { useMediaPredicate } from 'react-media-hook';
-import { colorPalette, sizes, zIndex } from 'stylesheet';
+import { sizes } from 'stylesheet';
 import React, { useMemo, useRef } from 'react';
 import { TrekChildGeometry } from 'modules/details/interface';
 import { cleanHTMLElementsFromString } from 'modules/utils/string';
@@ -118,18 +118,13 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ detailsId, parentId,
           }
         />
         {details === undefined ? (
-          isLoading ? (
-            <Loader
-              loaded={!isLoading}
-              options={{
-                top: `${sizes.desktopHeader + sizes.filterBar}px`,
-                color: colorPalette.primary1,
-                zIndex: zIndex.loader,
-              }}
-            />
-          ) : (
-            <ErrorFallback refetch={refetch} />
-          )
+          <Layout>
+            {isLoading ? (
+              <Loader className="absolute inset-0" />
+            ) : (
+              <ErrorFallback refetch={refetch} />
+            )}
+          </Layout>
         ) : (
           <>
             <Layout>

frontend/src/components/pages/details/components/DetailsReservationWidget/DetailsReservationWidget.tsx

@@ -1,5 +1,6 @@
 import { Reservation } from 'modules/details/interface';
 import { useCallback, useEffect } from 'react';
+import Loader from 'components/Loader';
 import Script from 'next/script';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -91,7 +92,9 @@ export const DetailsReservationWidget: React.FC<DetailsReservationWidgetProps> =
         strategy="lazyOnload"
       />
       <div className="OsItinerance OsItPartner CssCustom">
-        <div id="eiti-partner"></div>
+        <div id="eiti-partner">
+          <Loader />
+        </div>
       </div>
     </>
   );

frontend/src/components/pages/flatPage/FlatPage.tsx

@@ -1,5 +1,5 @@
 import { Layout } from 'components/Layout/Layout';
-import Loader from 'react-loader';
+import Loader from 'components/Loader';
 import { colorPalette, sizes, zIndex } from 'stylesheet';
 import parse from 'html-react-parser';
 import { Footer } from 'components/Footer';
@@ -34,14 +34,7 @@ export const FlatPageUI: React.FC<FlatPageUIProps> = ({ flatPageUrl }) => {
       />
       {flatPage === undefined ? (
         isLoading === true ? (
-          <Loader
-            loaded={!isLoading}
-            options={{
-              top: `${sizes.desktopHeader + sizes.filterBar}px`,
-              color: colorPalette.primary1,
-              zIndex: zIndex.loader,
-            }}
-          />
+          <Loader />
         ) : (
           <ErrorFallback refetch={refetch} />
         )