diff --git a/frontend/package.json b/frontend/package.json index ce43ccb80..1c43f62e1 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx index b8f2717dd..fcc8e4c7d 100644 --- a/frontend/src/components/Layout/Layout.tsx +++ b/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 ( -
+
-
+
- + {children} diff --git a/frontend/src/components/Loader/Loader.style.ts b/frontend/src/components/Loader/Loader.style.ts index 7f948afb7..5c92a5d9a 100644 --- a/frontend/src/components/Loader/Loader.style.ts +++ b/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; } `; diff --git a/frontend/src/components/Loader/Loader.tsx b/frontend/src/components/Loader/Loader.tsx index 672f671bd..15ee73d82 100644 --- a/frontend/src/components/Loader/Loader.tsx +++ b/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 = () => ( - - - - - - - - - - - - - - - - -); +const Loader: React.FC = ({ className = '', loaded = false, children = '' }) => { + if (loaded === true) { + return <>{children}; + } + return ( +
+

+ +

+
+ + + + + + + + + + + + +
+
+ ); +}; export default Loader; diff --git a/frontend/src/components/Map/components/Popup/index.tsx b/frontend/src/components/Map/components/Popup/index.tsx index c7c9e548d..faa7b85b7 100644 --- a/frontend/src/components/Map/components/Popup/index.tsx +++ b/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 = ({ showButton, id, type, parentId }) => const { isLoading, trekPopupResult } = usePopupResult(id.toString(), true, type); return ( - + {trekPopupResult && (
diff --git a/frontend/src/components/Report/Report.tsx b/frontend/src/components/Report/Report.tsx index 57ee07900..c405c6722 100644 --- a/frontend/src/components/Report/Report.tsx +++ b/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 = ({ displayMobileMap, startPoint, trekId }) => { }; return ( - + <>

@@ -218,16 +217,8 @@ const Report: React.FC = ({ displayMobileMap, startPoint, trekId }) => { )} )} - + ); }; -const ReportWrapper = styled.div` - position: relative; - z-index: 0; - > .loader { - min-height: 80px; - } -`; - export default Report; diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx index 25daf4c3c..51896f028 100644 --- a/frontend/src/components/pages/details/Details.tsx +++ b/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 = ({ detailsId, parentId, } /> {details === undefined ? ( - isLoading ? ( - - ) : ( - - ) + + {isLoading ? ( + + ) : ( + + )} + ) : ( <> diff --git a/frontend/src/components/pages/details/components/DetailsReservationWidget/DetailsReservationWidget.tsx b/frontend/src/components/pages/details/components/DetailsReservationWidget/DetailsReservationWidget.tsx index ff7689c07..9ce2c7806 100644 --- a/frontend/src/components/pages/details/components/DetailsReservationWidget/DetailsReservationWidget.tsx +++ b/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 = strategy="lazyOnload" />

-
+
+ +
); diff --git a/frontend/src/components/pages/flatPage/FlatPage.tsx b/frontend/src/components/pages/flatPage/FlatPage.tsx index 47a40aa4c..a8c55f9de 100644 --- a/frontend/src/components/pages/flatPage/FlatPage.tsx +++ b/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 = ({ flatPageUrl }) => { /> {flatPage === undefined ? ( isLoading === true ? ( - + ) : ( ) diff --git a/frontend/src/components/pages/search/Search.tsx b/frontend/src/components/pages/search/Search.tsx index 09a3a7113..3160019da 100644 --- a/frontend/src/components/pages/search/Search.tsx +++ b/frontend/src/components/pages/search/Search.tsx @@ -4,9 +4,9 @@ import { useEffect } from 'react'; import { useMediaPredicate } from 'react-media-hook'; import styled from 'styled-components'; import { FormattedMessage, useIntl } from 'react-intl'; -import Loader from 'react-loader'; +import Loader from 'components/Loader'; import InfiniteScroll from 'react-infinite-scroll-component'; -import { colorPalette, sizes, zIndex } from 'stylesheet'; +import { colorPalette, sizes } from 'stylesheet'; import { Layout } from 'components/Layout/Layout'; import { TouristicContentCategoryMapping } from 'modules/touristicContentCategory/interface'; @@ -112,14 +112,20 @@ export const SearchUI: React.FC = ({ language }) => { id, selectedOptions: [ ...list[index].selectedOptions, - ...item.selectedOptions.map(option => ({ ...option, include: false })), + ...item.selectedOptions.map(option => ({ + ...option, + include: false, + })), ], }; } } else { list.push({ ...item, - selectedOptions: item.selectedOptions.map(option => ({ ...option, include: true })), + selectedOptions: item.selectedOptions.map(option => ({ + ...option, + include: true, + })), }); } return list; @@ -128,7 +134,7 @@ export const SearchUI: React.FC = ({ language }) => { const numberSelected = countFiltersSelected(filtersState, null, null); return ( -