hide search results whilst validating

Refuge-Worldwide · Nov 14, 2023 · dacaf6f · dacaf6f
1 parent 208120a
commit dacaf6f
Showing 1 changed file with 69 additions and 67 deletions.
diff --git 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>