From a0a18643c422282df83e970e69f009414fe9b6d3 Mon Sep 17 00:00:00 2001
From: Christophe <christophe.misc+git@protonmail.ch>
Date: Thu, 14 Sep 2023 04:17:01 +0200
Subject: [PATCH] fix(LoadingOverlay): add smooth transition to fade in and out

---
 components/TagSelector/index.tsx         | 16 ++++++----
 components/loadingOverlay.tsx            |  9 ++++--
 components/report-view/BenchmarkInfo.tsx |  2 +-
 components/report-view/ClaimInfo.tsx     |  2 +-
 components/report-view/FlavorInfo.tsx    |  2 +-
 components/report-view/ResultInfo.tsx    |  2 +-
 components/report-view/SiteInfo.tsx      |  2 +-
 components/searchSelectors/index.tsx     | 37 ++++++++++++------------
 components/site-editor/FlavorList.tsx    |  4 +--
 pages/search/result.tsx                  | 10 +++++--
 pages/site-editor.tsx                    |  4 +--
 styles/loadingOverlay.module.css         |  6 +++-
 12 files changed, 58 insertions(+), 38 deletions(-)

diff --git a/components/TagSelector/index.tsx b/components/TagSelector/index.tsx
index dca404b..9037be8 100644
--- a/components/TagSelector/index.tsx
+++ b/components/TagSelector/index.tsx
@@ -30,7 +30,7 @@ const TagSelector: FC<TagSelectorProps> = ({
         () => api.tags.searchTag(searchString.split(' ')),
         {
             keepPreviousData: true,
-        }
+        },
     );
 
     const select = (newTag: Tag) => {
@@ -79,22 +79,28 @@ const TagSelector: FC<TagSelectorProps> = ({
                                 {tags.data.data.items
                                     .filter(
                                         (tag) =>
-                                            !selected.some((otherTag) => otherTag.id === tag.id)
+                                            !selected.some((otherTag) => otherTag.id === tag.id),
                                     )
                                     .map((tag) => (
                                         <PlaceholderTag key={tag.id} />
                                     ))}
                             </div>
                         )}
-                        {(tags.isFetching || tags.isLoading || tags.isRefetching) &&
-                            !tags.isPreviousData && <LoadingOverlay />}
+                        <LoadingOverlay
+                            loading={
+                                (tags.isFetching || tags.isLoading || tags.isRefetching) &&
+                                !tags.isPreviousData
+                            }
+                        />
                         {tags.isSuccess && !tags.isPreviousData && (
                             <>
                                 <div className="d-flex">
                                     {tags.data.data.items
                                         .filter(
                                             (tag) =>
-                                                !selected.some((otherTag) => otherTag.id === tag.id)
+                                                !selected.some(
+                                                    (otherTag) => otherTag.id === tag.id,
+                                                ),
                                         )
                                         .map((tag) => (
                                             <UnselectedTag tag={tag} select={select} key={tag.id} />
diff --git a/components/loadingOverlay.tsx b/components/loadingOverlay.tsx
index 506312c..47d40b9 100644
--- a/components/loadingOverlay.tsx
+++ b/components/loadingOverlay.tsx
@@ -1,12 +1,17 @@
 import { type FC, type PropsWithChildren } from 'react';
 
 import styles from 'styles/loadingOverlay.module.css';
+import clsx from 'clsx';
+
+type LoadingOverlayProps = {
+    loading?: boolean;
+};
 
 /**
  * Space filling loading overlay including a spinner or equivalent
  */
-export const LoadingOverlay: FC = () => (
-    <div className={styles['loading']}>
+export const LoadingOverlay: FC<LoadingOverlayProps> = ({ loading = true }) => (
+    <div className={clsx(styles['loading'], !loading && styles['loaded'])}>
         <div className={styles['ldsEllipsis']}>
             <div />
             <div />
diff --git a/components/report-view/BenchmarkInfo.tsx b/components/report-view/BenchmarkInfo.tsx
index 10c4b78..16a4046 100644
--- a/components/report-view/BenchmarkInfo.tsx
+++ b/components/report-view/BenchmarkInfo.tsx
@@ -12,7 +12,7 @@ const BenchmarkInfo: FC<BenchmarkInfoProps> = ({ id }) => {
 
     return (
         <>
-            {benchmark.isLoading && <LoadingOverlay />}
+            <LoadingOverlay loading={benchmark.isLoading} />
             {benchmark.isSuccess && (
                 <>
                     Image: {benchmarkLinkDisplay(benchmark.data.data)}
diff --git a/components/report-view/ClaimInfo.tsx b/components/report-view/ClaimInfo.tsx
index bb23b03..909f349 100644
--- a/components/report-view/ClaimInfo.tsx
+++ b/components/report-view/ClaimInfo.tsx
@@ -23,7 +23,7 @@ const ClaimInfo: FC<ClaimInfoProps> = ({ id, claim: claimCache }) => {
 
     return (
         <>
-            {claim.isLoading && <LoadingOverlay />}
+            <LoadingOverlay loading={claim.isLoading} />
             {claimData && (
                 <>
                     Message: {truthyOrNoneTag(claimData.message)} <br />
diff --git a/components/report-view/FlavorInfo.tsx b/components/report-view/FlavorInfo.tsx
index bbe9ba1..db3b23e 100644
--- a/components/report-view/FlavorInfo.tsx
+++ b/components/report-view/FlavorInfo.tsx
@@ -19,7 +19,7 @@ const FlavorInfo: FC<FlavorInfoProps> = ({ id }) => {
 
     return (
         <>
-            {flavor.isLoading && <LoadingOverlay />}
+            <LoadingOverlay loading={flavor.isLoading} />
             {flavor.isSuccess && (
                 <>
                     Name: {flavor.data.data.name}
diff --git a/components/report-view/ResultInfo.tsx b/components/report-view/ResultInfo.tsx
index 17e7750..f7612c8 100644
--- a/components/report-view/ResultInfo.tsx
+++ b/components/report-view/ResultInfo.tsx
@@ -16,7 +16,7 @@ const ResultInfo: FC<ResultInfoProps> = ({ id }) => {
 
     return (
         <>
-            {result.isLoading && <LoadingOverlay />}
+            <LoadingOverlay loading={result.isLoading} />
             {result.isSuccess && (
                 <>
                     Site: {result.data.data.site.name}
diff --git a/components/report-view/SiteInfo.tsx b/components/report-view/SiteInfo.tsx
index 43c2e64..e36504e 100644
--- a/components/report-view/SiteInfo.tsx
+++ b/components/report-view/SiteInfo.tsx
@@ -12,7 +12,7 @@ const SiteInfo: FC<SiteInfoProps> = ({ id }) => {
 
     return (
         <>
-            {site.isLoading && <LoadingOverlay />}
+            <LoadingOverlay loading={site.isLoading} />
             {site.isSuccess && (
                 <>
                     Name: {site.data.data.name}
diff --git a/components/searchSelectors/index.tsx b/components/searchSelectors/index.tsx
index ab67176..52a3be8 100644
--- a/components/searchSelectors/index.tsx
+++ b/components/searchSelectors/index.tsx
@@ -47,7 +47,7 @@ export function SearchingSelector<Item extends Identifiable>({
         },
         {
             enabled: !disabled,
-        }
+        },
     );
 
     const updateItem = (item?: Item) => {
@@ -61,26 +61,27 @@ export function SearchingSelector<Item extends Identifiable>({
             <Popover.Body>
                 <SearchForm setSearchString={setSearchString} />
                 <div style={{ position: 'relative' }}>
-                    {items.isLoading && (
+                    {items.isError && <div>Failed to fetch benchmarks!</div>}
+                    {(items.isSuccess || items.isLoading) && (
                         <>
-                            <Table<Item>
-                                setItem={() => undefined}
-                                items={[]}
-                                tableName={tableName}
-                                displayItem={() => null}
-                            />
-                            <LoadingOverlay />
+                            {items.isLoading ? (
+                                <Table<Item>
+                                    setItem={() => undefined}
+                                    items={[]}
+                                    tableName={tableName}
+                                    displayItem={() => null}
+                                />
+                            ) : (
+                                <Table<Item>
+                                    items={items.data.data.items}
+                                    setItem={updateItem}
+                                    tableName={tableName}
+                                    displayItem={displayRow}
+                                />
+                            )}
+                            <LoadingOverlay loading={items.isLoading} />
                         </>
                     )}
-                    {items.isError && <div>Failed to fetch benchmarks!</div>}
-                    {items.isSuccess && (
-                        <Table<Item>
-                            items={items.data.data.items}
-                            setItem={updateItem}
-                            tableName={tableName}
-                            displayItem={displayRow}
-                        />
-                    )}
                 </div>
                 <Row>
                     {items.isSuccess && (
diff --git a/components/site-editor/FlavorList.tsx b/components/site-editor/FlavorList.tsx
index e4a0e55..69582cb 100644
--- a/components/site-editor/FlavorList.tsx
+++ b/components/site-editor/FlavorList.tsx
@@ -19,14 +19,14 @@ const FlavorList: FC<FlavorListProps> = ({ site }) => {
         () => api.sites.listFlavors(site.id, undefined, undefined, undefined, undefined, page),
         {
             refetchOnMount: 'always',
-        }
+        },
     );
 
     return (
         <Form.Group className="mb-3">
             <Form.Label>Flavors:</Form.Label>
             <Card style={{ maxHeight: '16rem' }} className="overflow-auto">
-                {flavors.isLoading && <LoadingOverlay />}
+                <LoadingOverlay loading={flavors.isLoading} />
                 {flavors.isSuccess &&
                     flavors.data.data.items.map((flavor: Flavor) => (
                         <FlavorEditor flavor={flavor} key={flavor.id} refetch={flavors.refetch} />
diff --git a/pages/search/result.tsx b/pages/search/result.tsx
index ece87e1..106a520 100644
--- a/pages/search/result.tsx
+++ b/pages/search/result.tsx
@@ -554,9 +554,13 @@ const ResultSearch: FC<PageProps> = (props: PageProps) => {
                         </Row>
                         <Stack gap={2}>
                             <div className="position-relative" style={{ overflowX: 'auto' }}>
-                                {(results.isLoading ||
-                                    results.isFetching ||
-                                    results.isRefetching) && <LoadingOverlay />}
+                                <LoadingOverlay
+                                    loading={
+                                        results.isLoading ||
+                                        results.isFetching ||
+                                        results.isRefetching
+                                    }
+                                />
                                 {results.isSuccess && results.data.data.total > 0 && (
                                     <ResultTable
                                         results={resultData.items}
diff --git a/pages/site-editor.tsx b/pages/site-editor.tsx
index 12fbe71..24449ab 100644
--- a/pages/site-editor.tsx
+++ b/pages/site-editor.tsx
@@ -31,7 +31,7 @@ const SitesEditor: NextPage = () => {
     }, [router, auth.admin, auth.loading]);
 
     const sites = useQuery('sites', () =>
-        api.sites.listSites(undefined, undefined, undefined, undefined, page)
+        api.sites.listSites(undefined, undefined, undefined, undefined, page),
     );
 
     const [activeSite, setActiveSite] = useState<Site | null>(null);
@@ -40,7 +40,7 @@ const SitesEditor: NextPage = () => {
         return (
             <>
                 <ListGroup>
-                    {sites.isLoading && <LoadingOverlay />}
+                    <LoadingOverlay loading={sites.isLoading} />
                     {sites.isSuccess && sites.data.data.items.length === 0 && 'No sites found!'}
                     {sites.isSuccess &&
                         sites.data.data.items.map((site: Site) => (
diff --git a/styles/loadingOverlay.module.css b/styles/loadingOverlay.module.css
index ff0d922..3a8f0fb 100644
--- a/styles/loadingOverlay.module.css
+++ b/styles/loadingOverlay.module.css
@@ -1,6 +1,6 @@
 .loading {
     background-color: rgba(52, 58, 64, 0.6);
-    transition: opacity .5s ease-in-out;
+    transition: opacity 0.5s ease-in-out;
     opacity: 1;
     pointer-events: auto;
     display: flex;
@@ -13,6 +13,10 @@
     z-index: 9999;
 }
 
+.loading.loaded {
+    opacity: 0;
+}
+
 /**
     'ellipsis' from loading.io, in public domain (https://loading.io/license/)
  */