From dacaf6f75ba7e8448dc3f09e8c91ae3a20677554 Mon Sep 17 00:00:00 2001
From: Jack MB <jack@designandcode.com>
Date: Tue, 14 Nov 2023 11:20:40 +0100
Subject: [PATCH] hide search results whilst validating

---
 pages/search.tsx | 136 ++++++++++++++++++++++++-----------------------
 1 file changed, 69 insertions(+), 67 deletions(-)

diff --git a/pages/search.tsx b/pages/search.tsx
index 52602773..0b941891 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -74,7 +74,7 @@ export default function SearchPage({
       </section>
 
       {isValidating && (
-        <section className="border-b-2">
+        <section className="border-b-2 min-h-screen">
           <div className="container-md p-4 pb-[calc(1rem-2px)] sm:p-8 sm:pb-[calc(2rem-2px)]">
             <div className="pt-10 pb-10">
               <p>
@@ -98,73 +98,75 @@ export default function SearchPage({
         </section>
       )}
 
-      <div className="divide-y-2">
-        {!isEmpty(data.shows) && (
-          <section>
-            <div className="p-4 sm:p-8">
-              <Pill>
-                <h2>Shows</h2>
-              </Pill>
-
-              <div className="h-5" />
-
-              <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-10 sm:gap-8">
-                {data.shows.map((show) => (
-                  <li key={show.fields.slug}>
-                    <ShowPreviewWithoutPlayer {...show} />
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </section>
-        )}
-
-        {!isEmpty(data.articles) && (
-          <section>
-            <div className="p-4 sm:p-8">
-              <Pill>
-                <h2>News</h2>
-              </Pill>
-
-              <div className="h-5" />
-
-              <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-10 sm:gap-8">
-                {data.articles.map((article) => (
-                  <li key={article.fields.slug}>
-                    <ArticlePreviewForSearch {...article} />
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </section>
-        )}
-
-        {!isEmpty(data.artists) && (
-          <section>
-            <div className="p-4 sm:p-8">
-              <Pill>
-                <h2>Artists</h2>
-              </Pill>
-
-              <div className="h-5" />
-
-              <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-6 sm:gap-8">
-                {data.artists.map((artist) => {
-                  return (
-                    <li key={artist.fields.slug}>
-                      <ArtistPreview
-                        name={artist.fields.name}
-                        slug={artist.fields.slug}
-                        src={artist.fields.photo.fields.file.url}
-                      />
+      {!isValidating && (
+        <div className="divide-y-2">
+          {!isEmpty(data.shows) && (
+            <section>
+              <div className="p-4 sm:p-8">
+                <Pill>
+                  <h2>Shows</h2>
+                </Pill>
+
+                <div className="h-5" />
+
+                <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-10 sm:gap-8">
+                  {data.shows.map((show) => (
+                    <li key={show.fields.slug}>
+                      <ShowPreviewWithoutPlayer {...show} />
                     </li>
-                  );
-                })}
-              </ul>
-            </div>
-          </section>
-        )}
-      </div>
+                  ))}
+                </ul>
+              </div>
+            </section>
+          )}
+
+          {!isEmpty(data.articles) && (
+            <section>
+              <div className="p-4 sm:p-8">
+                <Pill>
+                  <h2>News</h2>
+                </Pill>
+
+                <div className="h-5" />
+
+                <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-10 sm:gap-8">
+                  {data.articles.map((article) => (
+                    <li key={article.fields.slug}>
+                      <ArticlePreviewForSearch {...article} />
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </section>
+          )}
+
+          {!isEmpty(data.artists) && (
+            <section>
+              <div className="p-4 sm:p-8">
+                <Pill>
+                  <h2>Artists</h2>
+                </Pill>
+
+                <div className="h-5" />
+
+                <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-6 sm:gap-8">
+                  {data.artists.map((artist) => {
+                    return (
+                      <li key={artist.fields.slug}>
+                        <ArtistPreview
+                          name={artist.fields.name}
+                          slug={artist.fields.slug}
+                          src={artist.fields.photo.fields.file.url}
+                        />
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            </section>
+          )}
+        </div>
+      )}
 
       <div className="h-10" />
     </Layout>