hide header after generating first image

components/header.tsx

@@ -1,40 +1,50 @@
+"use client";
 import Image from "next/image";
 
 import HeaderImage from "@/assets/images/header.svg";
-import HeaderImageMesh from "@/assets/images/header-mesh.png";
+
+import { useInputGeneration } from "@/components/main/hooks/useInputGeneration";
+import classNames from "classnames";
 
 export const Header = () => {
+  const { hasMadeFirstGeneration } = useInputGeneration();
+  console.log(hasMadeFirstGeneration);
   return (
     <header
-      className="relative bg-cover bg-fixed bg-black z-[1]"
-      // style={{
-      //   backgroundImage: `url(${HeaderImageMesh.src})`,
-      // }}
+      className={classNames(
+        "bg-black z-[1] transition-all duration-1000 overflow-hidden",
+        {
+          "!max-h-[0px]": hasMadeFirstGeneration,
+          "max-h-[450px]": !hasMadeFirstGeneration,
+        }
+      )}
     >
-      <div className="flex items-start px-6 mx-auto max-w-[1722px] relative pt-24 pb-20">
-        <div className="w-full lg:w-1/2 relative z-10">
-          <h1 className="font-bold text-5xl lg:text-7xl text-white text-center lg:text-left">
-            Fast Stable <br />
-            Diffusion XL <br className="hidden lg:block" />
-            on TPU v5e ⚡
-          </h1>
-          <p className="text-sm text-white mt-3 text-center lg:text-left">
-            Powered by{" "}
-            <a
-              href="https://huggingface.co"
-              className="text-transparent bg-clip-text bg-gradient-to-r from-[#EFA596] to-[#ED94EB]"
-            >
-              HuggingFace.co
-            </a>
-          </p>
+      <div className="relative bg-cover bg-fixed bg-black z-[1]">
+        <div className="flex items-start px-6 mx-auto max-w-[1722px] relative pt-24 pb-20">
+          <div className="w-full lg:w-1/2 relative z-10">
+            <h1 className="font-bold text-5xl lg:text-7xl text-white text-center lg:text-left">
+              Fast Stable <br />
+              Diffusion XL <br className="hidden lg:block" />
+              on TPU v5e ⚡
+            </h1>
+            <p className="text-sm text-white mt-3 text-center lg:text-left">
+              Powered by{" "}
+              <a
+                href="https://huggingface.co"
+                className="text-transparent bg-clip-text bg-gradient-to-r from-[#EFA596] to-[#ED94EB]"
+              >
+                HuggingFace.co
+              </a>
+            </p>
+          </div>
+          <Image
+            src={HeaderImage}
+            alt="Hugging Face header"
+            className="absolute w-full -right-10 bottom-0 max-w-lg lg:max-w-4xl z-[-1]"
+          />
         </div>
-        <Image
-          src={HeaderImage}
-          alt="Hugging Face header"
-          className="absolute w-full -right-10 bottom-0 max-w-lg lg:max-w-4xl z-[-1]"
-        />
+        <div className="absolute bottom-0 w-full h-full left-0 bg-gradient-to-b from-transparent to-black z-[1]" />
       </div>
-      <div className="absolute bottom-0 w-full h-full left-0 bg-gradient-to-b from-transparent to-black z-[1]" />
     </header>
   );
 };

components/main/collections/collection.tsx

@@ -33,9 +33,9 @@ export const Collection: React.FC<Props> = ({
         initial={{ y: 100, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.35, delay: index * 0.1 }}
-        className="rounded-3xl h-[377px] cursor-pointer group overflow-hidden relative z-[1] group"
+        className="rounded-[33px] h-[377px] cursor-pointer group overflow-hidden relative z-[1] group"
       >
-        <div className="absolute top-0 left-0 w-full h-full translate-y-full opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100 flex items-end p-3">
+        <div className="absolute top-0 left-0 w-full h-full translate-y-full opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 flex items-end p-3">
           <div className="bg-[#292424] backdrop-blur-sm bg-opacity-60 rounded-xl p-3 border-white/20 border w-full">
             <p className="text-xs font-semibold text-white/60 mb-0.5">
               27 October
@@ -52,7 +52,7 @@ export const Collection: React.FC<Props> = ({
           style={{
             backgroundImage: `url(${bufferToBase64})`,
           }}
-          className="rounded-3xl bg-red-400 bg-cover absolute top-0 left-0 w-full h-full z-[-1] transition-all duration-200 group-hover:scale-125 bg-center"
+          className="rounded-[33px] bg-red-400 bg-cover absolute top-0 left-0 w-full h-full z-[-1] transition-all duration-200 group-hover:scale-125 bg-center"
         />
       </motion.div>
     </div>

components/main/collections/index.tsx

@@ -15,13 +15,11 @@ export const Collections = () => {
 
   if (loading) return;
 
-  console.log(collections);
-
   return (
     <div className="mx-auto grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14">
       {collections?.map((collection: CollectionType, i: number) =>
         collection?.id === -1 ? (
-          <CollectionLoading prompt={collection.prompt} />
+          <CollectionLoading key={i} prompt={collection.prompt} />
         ) : (
           <Collection
             key={i}

components/main/hooks/useInputGeneration.ts

@@ -9,6 +9,7 @@ export const useInputGeneration = () => {
   const { mutate: submit, isLoading: loading } = useMutation(
     ["generation"],
     async () => {
+      if (!hasMadeFirstGeneration) setFirstGenerationDone()
       client.setQueryData(["collections"], (old) => {
         return [{
           id: -1,
@@ -45,11 +46,15 @@ export const useInputGeneration = () => {
     },
   )
 
+  const { data: hasMadeFirstGeneration } = useQuery(["firstGenerationDone"], () => false)
+  const setFirstGenerationDone = () => client.setQueryData(["firstGenerationDone"], true)
+
   return {
     prompt,
     setPrompt,
     loading,
     submit,
+    hasMadeFirstGeneration
   }
 
 }