From 231fd99406d0076530ecc22b00af8c4259561486 Mon Sep 17 00:00:00 2001 From: samwisekind Date: Fri, 20 Sep 2024 19:19:20 +0100 Subject: [PATCH 1/2] Add catalogue loading icon --- public/images/icons/catalogues/loading.svg | 1 - src/components/Loading/Loading.module.scss | 42 +++++++++++++++++++ src/components/Loading/Loading.tsx | 19 +++++++++ src/components/index.ts | 2 + .../bottlenose-dolphin/[slug].module.scss | 13 +++--- .../catalogues/bottlenose-dolphin/[slug].tsx | 10 ++++- .../research/catalogues/index.module.scss | 6 ++- src/pages/research/catalogues/index.tsx | 12 +++--- src/scss/variables.scss | 1 + 9 files changed, 87 insertions(+), 19 deletions(-) delete mode 100644 public/images/icons/catalogues/loading.svg create mode 100644 src/components/Loading/Loading.module.scss create mode 100644 src/components/Loading/Loading.tsx diff --git a/public/images/icons/catalogues/loading.svg b/public/images/icons/catalogues/loading.svg deleted file mode 100644 index 992a6f2..0000000 --- a/public/images/icons/catalogues/loading.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/components/Loading/Loading.module.scss b/src/components/Loading/Loading.module.scss new file mode 100644 index 0000000..4d8f7f4 --- /dev/null +++ b/src/components/Loading/Loading.module.scss @@ -0,0 +1,42 @@ +/* stylelint-disable selector-max-id */ + +@use 'sass:math'; + +@import '../../scss/variables'; + +.loading { + display: block; + width: 100px; + height: auto; + + @include breakpoint('small') { + width: 70px; + } +} + +.wave { + $distance: 33.3%; + + @keyframes wave { + 0% { transform: translateX(0); } + 100% { transform: translateX(-$distance); } + } + + animation: wave 1.5s infinite linear; +} + +.dolphin { + $rotation: 80deg; + $distance: 150%; + + @keyframes dolphin { + 0% { transform: translateY($distance) rotate(-$rotation); } + 50% { transform: translateY(0) rotate(0deg); } + 100% { transform: translateY($distance) rotate($rotation); } + } + + animation: dolphin 2s infinite $global-transition-ease-in-out-quart; + transform-box: fill-box; + transform-origin: center; +} + diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx new file mode 100644 index 0000000..743ff41 --- /dev/null +++ b/src/components/Loading/Loading.tsx @@ -0,0 +1,19 @@ +import styles from './Loading.module.scss'; + +const Loading = () => ( + + + + + + + +); + +export default Loading; diff --git a/src/components/index.ts b/src/components/index.ts index 56def3c..b0b452e 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -8,6 +8,7 @@ import Highlight from './Highlight/Highlight'; import ImageCaption from './ImageCaption/ImageCaption'; import ImageRow from './ImageRow/ImageRow'; import ListItem from './ListItem/ListItem'; +import Loading from './Loading/Loading'; import Note from './Note/Note'; import SEO from './SEO/SEO'; import Social from './Social/Social'; @@ -24,6 +25,7 @@ export { ImageCaption, ImageRow, ListItem, + Loading, Note, SEO, Social, diff --git a/src/pages/research/catalogues/bottlenose-dolphin/[slug].module.scss b/src/pages/research/catalogues/bottlenose-dolphin/[slug].module.scss index 0d1a4b9..224852d 100644 --- a/src/pages/research/catalogues/bottlenose-dolphin/[slug].module.scss +++ b/src/pages/research/catalogues/bottlenose-dolphin/[slug].module.scss @@ -133,15 +133,12 @@ $catalogue-max-width: 2000px; line-height: 14px; } - > li.loading::before { - content: ''; - display: block; + > li.loading { + padding: 10px 0; + } + + > li.loading > svg { margin: 0 auto; - width: 32px; - height: 32px; - background: url('../../../../../public/images/icons/catalogues/loading.svg') center center no-repeat; - background-size: contain; - animation: spin 2s infinite linear; } } diff --git a/src/pages/research/catalogues/bottlenose-dolphin/[slug].tsx b/src/pages/research/catalogues/bottlenose-dolphin/[slug].tsx index ea174c4..c438eba 100644 --- a/src/pages/research/catalogues/bottlenose-dolphin/[slug].tsx +++ b/src/pages/research/catalogues/bottlenose-dolphin/[slug].tsx @@ -12,7 +12,13 @@ import sitemap from '@/data/sitemap.json'; import { formatDateMonth } from '@/helpers/formatDate'; import { getCatalogueItem, getCatalogueItemSlug } from '@/helpers/getBottlenoseDolphinCatalogue'; -import { SEO, Breadcrumbs, Catalogue, Tooltip } from '@/components/index'; +import { + SEO, + Breadcrumbs, + Catalogue, + Tooltip, + Loading, +} from '@/components/index'; import styles from './[slug].module.scss'; @@ -73,7 +79,7 @@ const Search = () => { {showResults && ( )} diff --git a/src/pages/research/catalogues/index.module.scss b/src/pages/research/catalogues/index.module.scss index 34be919..06c091a 100644 --- a/src/pages/research/catalogues/index.module.scss +++ b/src/pages/research/catalogues/index.module.scss @@ -1,11 +1,13 @@ @import '../../../scss/variables'; .loading { - opacity: 0.3; - &:hover { cursor: wait; } + + > svg { + margin: 0 auto; + } } .info { diff --git a/src/pages/research/catalogues/index.tsx b/src/pages/research/catalogues/index.tsx index aa03a41..ebde0f4 100644 --- a/src/pages/research/catalogues/index.tsx +++ b/src/pages/research/catalogues/index.tsx @@ -12,7 +12,7 @@ import getPageContent from '@/helpers/getPageContent'; import CommonPage from '@/layout/CommonPage'; -import { Filters, Catalogue } from '@/components/index'; +import { Filters, Catalogue, Loading } from '@/components/index'; import styles from './index.module.scss'; @@ -76,9 +76,7 @@ const Page: NextPage = ({ } let infoText = ''; - if (loading) { - infoText = 'Loading...'; - } else if (searchText !== '' && data?.items?.length === 0) { + if (searchText !== '' && data?.items?.length === 0) { infoText = `No results for "${searchText}"`; } else if (searchText !== '' && data?.items) { infoText = `${data.meta.totalItems} ${data?.items.length > 1 ? 'items' : 'item'} found for "${searchText}" (page ${page} of ${data.meta.totalPages})`; @@ -106,9 +104,11 @@ const Page: NextPage = ({ />
- {infoText !== '' &&

{infoText}

} + {loading && } - {data?.items && ( + {(!loading && infoText !== '') &&

{infoText}

} + + {(!loading && data?.items) && (
    { data.items.map((item: any) => ( diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 9dc51d5..9b0934f 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -58,6 +58,7 @@ $global-font-line-height: 1.8; $global-transition-ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0); $global-transition-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); $global-transition-ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6); +$global-transition-ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); // Mixins From 01d1bd643b57d94dcf6a0228bafaff4ca1a20481 Mon Sep 17 00:00:00 2001 From: samwisekind Date: Fri, 20 Sep 2024 19:21:17 +0100 Subject: [PATCH 2/2] Add tests --- src/components/Loading/Loading.spec.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/components/Loading/Loading.spec.tsx diff --git a/src/components/Loading/Loading.spec.tsx b/src/components/Loading/Loading.spec.tsx new file mode 100644 index 0000000..d445e6c --- /dev/null +++ b/src/components/Loading/Loading.spec.tsx @@ -0,0 +1,21 @@ +import '@testing-library/jest-dom'; + +import { act } from 'react'; +import { render } from '@testing-library/react'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +import Loading from './Loading'; + +beforeAll(() => { + expect.extend(toHaveNoViolations); +}); + +it('Passes accessibility', async () => act(async () => { + const { container } = render( + + ); + + const results = await axe(container); + + expect(results).toHaveNoViolations(); +}));