LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-06 04:21:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: add initial loading state

Browse Source
This commit is contained in:
Corbin Crutchley
2023-08-18 00:11:40 -07:00
parent 02fd79faef
commit 69c6c6b980
4 changed files with 86 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/animations/unicorn_loading_animation_dark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

1
public/animations/unicorn_loading_animation_light.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

72
src/views/search/search-page.module.scss
View File

@@ -19,6 +19,10 @@
width: 100%;
max-width: var(--max-width_l);
padding: var(--site-spacing);
display: flex;
flex-direction: column;
/* Guestimation */
min-height: 80vh;
}
.collectionsGrid {
@@ -26,6 +30,72 @@
gap: var(--site-spacing);
@include from($tabletLarge) {
grid-template-columns: repeat(2, minmax(0, 1fr))
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@keyframes play36 {
0% {
background-position: 0px 0px;
}
/* 36 frames of animation, 72 frames total (2.4 * 30) */
50% {
background-position: -864px 0px;
}
100% {
background-position: -864px 0px;
}
}
@keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
70% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.loadingAnimationContainer {
height: 1px;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.loadingAnimation {
width: 24px;
height: 24px;
transform: scale(6);
margin-bottom: calc(24px * 5);
margin-right: calc(24px * 5);
background-image: url("/animations/unicorn_loading_animation_light.svg");
transform-origin: 0 0;
background-repeat: no-repeat;
animation:
play36 2400ms steps(36) 0s infinite normal forwards,
fade 2400ms steps(36) 0s infinite normal forwards;
@include darkTheme() {
background-image: url("/animations/unicorn_loading_animation_dark.svg");
}
@include from($tabletSmall) {
transform: scale(10);
margin-bottom: calc(24px * 9);
margin-right: calc(24px * 9);
}
@include from($desktopSmall) {
transform: scale(12);
margin-bottom: calc(24px * 11);
margin-right: calc(24px * 11);
}
}

18
src/views/search/search-page.tsx
View File

@@ -145,7 +145,8 @@ function SearchPageBase({ unicornProfilePicMap }: SearchPageProps) {
}
}, [error]);
const isContentLoading = isLoading || isFetching;
const isContentLoading = true;
// const isContentLoading = isLoading || isFetching;
/**
* Derived state
@@ -326,9 +327,16 @@ function SearchPageBase({ unicornProfilePicMap }: SearchPageProps) {
setFilterIsDialogOpen={setFilterIsDialogOpen}
/>
{!isError && isContentLoading && (
<p className={"text-style-headline-1"}>Loading...</p>
<>
<p aria-live="polite" className={"visually-hidden"}>
Loading...
</p>
<div className={style.loadingAnimationContainer}>
<div className={style.loadingAnimation} />
</div>
</>
)}
{!isError && noResults && (
{!isError && !isContentLoading && noResults && (
<SearchHero
imageSrc={sadUnicorn.src}
imageAlt={""}
@@ -336,7 +344,7 @@ function SearchPageBase({ unicornProfilePicMap }: SearchPageProps) {
description={"Please adjust your query or your active filters!"}
/>
)}
{isError && (
{isError && !isContentLoading && (
<SearchHero
imageSrc={scaredUnicorn.src}
imageAlt={""}
@@ -352,7 +360,7 @@ function SearchPageBase({ unicornProfilePicMap }: SearchPageProps) {
}
/>
)}
{!enabled && (
{!enabled && !isContentLoading && (
<SearchHero
imageSrc={happyUnicorn.src}
imageAlt={""}