add loading animate

.next/build-manifest.json

@@ -2,7 +2,9 @@
   "polyfillFiles": [
     "static/chunks/polyfills.js"
   ],
-  "devFiles": [],
+  "devFiles": [
+    "static/chunks/react-refresh.js"
+  ],
   "ampDevFiles": [],
   "lowPriorityFiles": [
     "static/development/_buildManifest.js",
@@ -13,7 +15,16 @@
     "static/chunks/main-app.js"
   ],
   "pages": {
-    "/_app": []
+    "/_app": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_app.js"
+    ],
+    "/_error": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_error.js"
+    ]
   },
   "ampFirstPages": []
 }

.next/cache/webpack/client-development-fallback/0.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a317ed37906f59b05625ade73074ed37bdf841988f6d26d369c3c787f87c789d
-size 11801673
+oid sha256:843ff71831cdafb40dc083869170c9884d6de3fa1cae9f39999f7f573f1abb77
+size 11806600

.next/cache/webpack/client-development-fallback/index.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:df8598f7810823493cd7aef06315d0b9564300ae456508ea66af248cf416dd1f
-size 44098
+oid sha256:7cda9257f9ebf045963772f4e5f7fbbff608a70eb39a3efb71f46afe1ed1eacf
+size 43058

.next/cache/webpack/client-development/0.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f19af5233a83970caf41f7667e83119d6957731a1afe59d23d4c0e2a768b3d86
-size 34992
+oid sha256:7389b3dd7f2d0b66fb76a504401cb036e5dd9e9ec7dc35932529dc75f02d4829
+size 545053

.next/cache/webpack/client-development/1.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f086ae23692f98eeb5a98493d0d106839286545d0f918ddf249bec53cbfd0c3b
-size 14951452
+oid sha256:f0af1ca89f44d5be5e42601e1457608014a724e0a1988627fecae92d33ed80c7
+size 10523

.next/cache/webpack/client-development/10.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2c0326d66ccd4c8027bd50755f48740a7d2fd318cc22d71d637e80800ee3d2b2
-size 24064
+oid sha256:fd00e2377bd0b581e2431b23f04ed48c6b730839848edc6d993869ee96761ec9
+size 2437

.next/cache/webpack/client-development/11.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3117969c4894077eedbc9a3b8c2a993a38050eabba3b0036a6a902d2b5600ac4
-size 11328079
+oid sha256:27ec9e0227c1d45b4094c13ba2fb004a60084898fa5358880cd8d0495552eaa7
+size 11454100

.next/cache/webpack/client-development/12.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c11d8bc715a54d8850d316d243ac120976e233ec542b9433c788c70ac545d191
-size 3628984
+oid sha256:df2fb7d91480a70b5c4dd41821970e5a67b873365810563dd0b4f45e881c4b23
+size 1710

.next/cache/webpack/client-development/13.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a9799d2852e56530610425f14a0239d49aa0398997bc9a2dbf45bd6d0551168e
-size 878172
+oid sha256:2592ac535f465990869eeb1590fc1be4c6501f24c954e33903c90d1d2116aa09
+size 4340933

.next/cache/webpack/client-development/2.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8b195a27515d6a3c3f55519e2aafbbacd3369c0266aedf417ea17b0fcb2b20fe
-size 49080
+oid sha256:9fc4fa91c5b4f98d10c9e4b5a16d267072fc0136106a57270d06d594fe4fe491
+size 1710

.next/cache/webpack/client-development/3.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c587ee53704e34c183e65b0a312ce5cbd82025e7eb5c70b46bdf44993f34bec9
-size 9002
+oid sha256:213cef7d02c10461027884433fb92a76e04c6f0848b3b667bc343d3979c36305
+size 12367

.next/cache/webpack/client-development/4.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1ba3e7b24bab0d3a7b93dd87e145e209adb33f34351c5b5bcb84330e6a8d117d
-size 30624
+oid sha256:cd97a31ae299df205694e3ff21cbf137bbf213bc5b5cdb656b7021ae4f3bde54
+size 1723

.next/cache/webpack/client-development/5.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:907fd184466e030ca19f97c04a1dbf62cdb6838079a830a2e6bf4a44fc70a41c
-size 3631300
+oid sha256:a9ff8954aacef4e8f567bd1be5a87a686a236a02e36bb79753e915cd23f9a783
+size 5179

.next/cache/webpack/client-development/6.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:98d25f4d4962d61f849ed435252bdbc5629aa5ec361faf0de6e3ba45076cf62d
-size 6101
+oid sha256:557f608d4cd339eb321737abd9dc93a6256eb30067b951af3e2f9fb3a906acbf
+size 4350762

.next/cache/webpack/client-development/7.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0f4320ccf6ff4954eb14e8df7bd36c98e9a94d07301e66a5f9162b2ffe8b95d4
-size 30277
+oid sha256:72d23761e4b2f47d91f0368e4545bf2e77c7fae24806fa9e4ee00e2b602fc91d
+size 1713

.next/cache/webpack/client-development/8.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f24b6eeeb4851031f52308fbff253290298c03bec71081054090e4e62ab9b359
-size 6517
+oid sha256:1c00bc8e486175cc67eccd8d0a2ecbf2ff0ae0a3709808187dcb87be868a97f5
+size 7494106

.next/cache/webpack/client-development/9.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d592538bb09693dea60f23fb614bef475c0070109faba3cebd8e2100a758cb01
-size 1675
+oid sha256:6332a93010ca1d0da8a40f2b9dab91455bb019242d93d8666a8225ccf39c9fd7
+size 32017

.next/cache/webpack/client-development/index.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:540308a4f7cc9795c4daff772660519e7a85eea2bc7b6fd412206148729a7e74
-size 179462
+oid sha256:8efbdd8b88b9272582cba42b8349f880e3981a0937e5c54ebd90321e6b3e1ee0
+size 212732

.next/cache/webpack/server-development/0.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d324ea7fc71d1b2069a372f439c8bbae7dd3ff91c21e7a64fe2dff10f9980fac
-size 5524079
+oid sha256:ea23ade4e0ec9f4ce33dca43ddd5483244937a84cbb65e2725d509db76ae5ab4
+size 483827

.next/cache/webpack/server-development/1.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1baeaf017b13c79974d4aabb16c5ea3ae1034e0c0e9ba6d960fda9ac0493cabc
-size 2905173
+oid sha256:9479b095d53db0e6f6674fa9ddf7e4c3342aa4c35624a558617984ced218b005
+size 6354

.next/cache/webpack/server-development/10.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:006cff238e51671646876f8ef15ebf038ab46ce48ede869fab91d756e725bda0
-size 30796
+oid sha256:3ed0d71472fa078596b7761e3597b55fa8f953fafe64d9e040cebe869aba0dcf
+size 6392509

.next/cache/webpack/server-development/11.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f83f382236143607ab70209ebefb5fcd8ac482aedd94025ee0b851cedb3e1d28
-size 5509581
+oid sha256:4ca15bd6e3fa8e658ec86599e3ed1e52169d7bbf6ae2c429a2f05ba212798e33
+size 15169

.next/cache/webpack/server-development/12.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8d145a687c93e2719b2af7729e1a35b23458dd8ef33caecd9d4c438089b88b89
-size 2864544
+oid sha256:89704954a7930340b0380ec2410e3e483abf6fe5f0d7e4244ba00cb9a48af0a7
+size 14622

.next/cache/webpack/server-development/13.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a5b08d5a3b1495160eb52cf64171929a701fa80a25b0e9f23b27ac0dfb8ec99b
-size 96671
+oid sha256:b9b61bd0c19d160299e443d6d05deae0e0f2b7dcbb390d111329d0b06a71667f
+size 2883828

.next/cache/webpack/server-development/2.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:44e0a75b02ca3e7d17404ce3e60bcc9ecdaf2020ed951fa7ed4f90038f8250cb
-size 397
+oid sha256:75b84df1c1ea898112a0338a190122850148fbc3e719cd4d2184c24136866d9b
+size 1394

.next/cache/webpack/server-development/3.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:eb3b474c87838860f18d92fc1f83b38cd96b1ee91ea28144ab58a453d521b834
-size 2809144
+oid sha256:0b14bc3e235f82d81236544beaec86f88b7d18f014e764b5f1b80f1c8b572e31
+size 8119

.next/cache/webpack/server-development/4.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:87a80a0307d74997f8fcb4e59aa09983685159bebbae8f077992f91df7dcf851
-size 6811
+oid sha256:5c151908ea6f6b20af2692fa35261af2c7151ffddd3fd05b616a5927cd0bcebb
+size 4607

.next/cache/webpack/server-development/5.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:99bc47786fa9f09829dfcffe2d1856bb8e7e37f2d48e7b9f04a540e3c4a28a43
-size 69464
+oid sha256:699a73de5cd9134ae91b062b07e8e37ce1b921d962afad4d83514b0cc931be91
+size 410

.next/cache/webpack/server-development/6.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2c980034fde9d010ea8a0f879f60bc9e896498546f0d1b87162f1cfbb9bea304
-size 3932
+oid sha256:5d5a24dbdc0fb2b4310fb90b3f8e9e22e595a4ed5443a0869fcbddda52f7f0c8
+size 3224956

.next/cache/webpack/server-development/7.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f7de6f6e7160c45cb55ebb9691bf85f1f40207bfd8a0867c6bd5530e92f30b10
-size 5509483
+oid sha256:48379fc2d254a3758fec57856b53d6ea131a8de3575f5ed18b5be16ed80b08a7
+size 266191

.next/cache/webpack/server-development/8.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a146ee1d12953dff43fcc85a8bd5306b2779a08497f768005387818ba5e6ff18
-size 4142
+oid sha256:f9292025cec02edacf6d802d35e3cebc3161c342421269e5e38cdf2127b507f2
+size 5781

.next/cache/webpack/server-development/9.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:804dfbbe6417488ec23c46baf19e47e9216343a38fc9151946d7db77985194b1
-size 4509
+oid sha256:d3194a5cdd55f27806199d5ed94a7f3c10cb430ed67d77bb79a595c98ca47c66
+size 13702

.next/cache/webpack/server-development/index.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c35b2459447ec32cc40c5a08db0ccf0ef7e4d4334f882836ccc5632121d7ab94
-size 112409
+oid sha256:8fd03283fca5c9b3e4537962af4fa888ea2bb915f4d826257792048727de4d13
+size 139172

.next/server/app-paths-manifest.json

@@ -1,3 +1,5 @@
 {
-  "/page": "app/page.js"
+  "/api/route": "app/api/route.js",
+  "/page": "app/page.js",
+  "/api/collections/route": "app/api/collections/route.js"
 }

.next/server/middleware-build-manifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST={"polyfillFiles":["static/chunks/polyfills.js"],"devFiles":[],"ampDevFiles":[],"lowPriorityFiles":["static/development/_buildManifest.js","static/development/_ssgManifest.js"],"rootMainFiles":["static/chunks/webpack.js","static/chunks/main-app.js"],"pages":{"/_app":[]},"ampFirstPages":[]}
+self.__BUILD_MANIFEST={"polyfillFiles":["static/chunks/polyfills.js"],"devFiles":["static/chunks/react-refresh.js"],"ampDevFiles":[],"lowPriorityFiles":["static/development/_buildManifest.js","static/development/_ssgManifest.js"],"rootMainFiles":["static/chunks/webpack.js","static/chunks/main-app.js"],"pages":{"/_app":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/_app.js"],"/_error":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/_error.js"]},"ampFirstPages":[]}

.next/server/pages-manifest.json

@@ -1 +1,5 @@
-{}
+{
+  "/_app": "pages/_app.js",
+  "/_error": "pages/_error.js",
+  "/_document": "pages/_document.js"
+}

.next/static/development/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST = {__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},sortedPages:["\u002F_app"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()
+self.__BUILD_MANIFEST = {__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/_error":["static\u002Fchunks\u002Fpages\u002F_error.js"],sortedPages:["\u002F_app","\u002F_error"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()

app/api/collections/route.ts

@@ -3,7 +3,11 @@ import { PrismaClient } from '@prisma/client'
 const prisma = new PrismaClient()
 
 export async function GET() {
-  const images = await prisma.image.findMany()
+  const images = await prisma.image.findMany({
+    orderBy: {
+      id: 'desc'
+    }
+  })
 
   return Response.json({ images, status: 200, statusText: "OK" })
 }

app/layout.tsx

@@ -1,9 +1,15 @@
+import { cache } from "react";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { QueryClient } from "@tanstack/react-query";
+
 import "@/assets/globals.css";
+import Providers from "@/components/react-query/providers";
 
 const inter = Inter({ subsets: ["latin"] });
 
+export const getQueryClient = () => cache(() => new QueryClient());
+
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -16,7 +22,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }

assets/globals.css

@@ -5,3 +5,35 @@
 body {
   @apply bg-black
 }
+
+.loading-dots {
+  @apply flex justify-start items-center gap-1
+}
+.loading-dots span{
+  @apply inline-block w-2 h-2 bg-white rounded-full
+}
+.loading-dots span:nth-child(1) {
+  animation: move 1s infinite;
+}
+.loading-dots span:nth-child(2) {
+  animation: move 1s .2s infinite;
+}
+.loading-dots span:nth-child(3) {
+  animation: move 1s .4s infinite;
+}
+
+/* create keyframes to move each span one by one infinite animation */
+@keyframes move {
+  0% {
+    transform: translateY(0);
+    opacity: .5;
+  }
+  50% {
+    transform: translateY(-6px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: .5;
+  }
+}

components/header.tsx

@@ -11,10 +11,11 @@ export const Header = () => {
       //   backgroundImage: `url(${HeaderImageMesh.src})`,
       // }}
     >
-      <div className="flex items-start px-6 mx-auto max-w-7xl relative pt-24 pb-20">
+      <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 Diffusion XL <br />
+            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">

components/main/collections/collection.tsx

@@ -1,18 +1,19 @@
-import { motion } from "framer-motion";
 import { useMemo } from "react";
+import { motion } from "framer-motion";
+
+import { Collection as CollectionType } from "@/type";
 
 interface Props {
-  collection: {
-    prompt: string;
-    blob: {
-      data: ArrayBuffer;
-      type: string;
-    };
-    id: number;
-  };
+  index: number;
+  collection: CollectionType;
+  className?: string;
 }
 
-export const Collection: React.FC<Props> = ({ collection }) => {
+export const Collection: React.FC<Props> = ({
+  collection,
+  index,
+  className,
+}) => {
   const arrayBufferToBase64 = (buffer: ArrayBuffer) => {
     let binary = "";
     const bytes = [].slice.call(new Uint8Array(buffer));
@@ -27,27 +28,33 @@ export const Collection: React.FC<Props> = ({ collection }) => {
   }, [collection]);
 
   return (
-    <motion.div
-      initial={{ y: 100, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      transition={{ duration: 0.35, delay: collection.id * 0.1 }}
-      className="rounded-3xl h-[377px] bg-cover cursor-pointer z-[1] group overflow-hidden p-3 relative flex items-end group"
-    >
-      <div className="bg-[#292424] bg-opacity-60 rounded-xl p-3 border-white/20 border w-full translate-y-full opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100">
-        <p className="text-xs font-semibold text-white/60 mb-0.5">27 October</p>
-        <p className="text-lg font-medium text-white lowercase leading-snug">
-          {collection.prompt}
-        </p>
-        <p className="text-white text-sm text-right font-semibold mt-2">
-          Try it now
-        </p>
-      </div>
-      <div
-        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"
-      />
-    </motion.div>
+    <div className={`h-[377px] w-full relative ${className}`}>
+      <motion.div
+        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"
+      >
+        <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="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
+            </p>
+            <p className="text-lg font-medium text-white lowercase leading-snug">
+              {collection.prompt}
+            </p>
+            <p className="text-white text-sm text-right font-semibold mt-2">
+              Try it now
+            </p>
+          </div>
+        </div>
+        <div
+          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"
+        />
+      </motion.div>
+    </div>
   );
 };

components/main/collections/index.tsx

@@ -1,42 +1,48 @@
 import classNames from "classnames";
-import { motion } from "framer-motion";
+import { createBreakpoint } from "react-use";
+
+import { Collection as CollectionType } from "@/type";
 
 import { useCollections } from "../hooks/useCollections";
 import { Collection } from "./collection";
+import { CollectionLoading } from "./loading";
 
-const IMAGES = [
-  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt13.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt01.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt02.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt06.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt14.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt17.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt18.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt27.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt32.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt34.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2023/01/prompt44.jpg",
-];
+const useBreakpoint = createBreakpoint({ XL: 1280, L: 1024, S: 768, XS: 640 });
 
 export const Collections = () => {
   const { collections, loading } = useCollections();
+  const breakpoint = useBreakpoint();
 
   if (loading) return;
 
+  console.log(collections);
+
   return (
-    <div className="px-6 max-w-[1722px] 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((col, e) => (
-        <div
-          key={e}
-          className={classNames("w-full grid-cols-1 grid gap-5", {
-            "translate-y-12": e % 2,
-          })}
-        >
-          {col.map((collection, i) => (
-            <Collection key={i} collection={collection} />
-          ))}
-        </div>
-      ))}
+    <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} />
+        ) : (
+          <Collection
+            key={i}
+            index={i}
+            collection={collection}
+            className={classNames("", {
+              // translate second and fourth item per row, row of 5 items
+              "!translate-y-12":
+                breakpoint === "XL"
+                  ? i % 5 === 1 || i % 5 === 3
+                  : breakpoint === "L"
+                  ? i % 4 === 1 || i % 4 === 3
+                  : breakpoint === "S"
+                  ? i % 3 === 1
+                  : breakpoint === "XS"
+                  ? i % 2 === 1
+                  : false,
+            })}
+          />
+        )
+      )}
     </div>
   );
 };

components/main/collections/loading.tsx

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+import { motion } from "framer-motion";
+
+import { Collection as CollectionType } from "@/type";
+
+interface Props {
+  prompt: string;
+}
+
+export const CollectionLoading: React.FC<Props> = ({ prompt }) => {
+  return (
+    <div className="h-[377px] w-full relative">
+      <motion.div
+        initial={{ y: 100, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.35, delay: 0.1 }}
+        className="rounded-3xl h-[377px] cursor-pointer group overflow-hidden relative z-[1] group bg-primary/70 flex flex-col justify-between p-8"
+      >
+        <div className="loading-dots translate-y-[5px]">
+          <span />
+          <span />
+          <span />
+        </div>
+        <p className="text-white/50 font-semibold text-xl">{prompt}</p>
+      </motion.div>
+    </div>
+  );
+};

components/main/hooks/useCollections.ts

@@ -1,25 +1,27 @@
-import { useState } from "react";
-import { useMount } from "react-use";
+import { Collection } from "@/type";
+import { useQuery } from "@tanstack/react-query";
 
 export const useCollections = () => {
-  const [collections, setCollections] = useState([[], [], [], [], []])
-  const [loading, setLoading] = useState<boolean>(false)
+  const {
+    data: collections,
+    isLoading: loading,
+      } = useQuery(
+    ["collections"],
+    async () => {
+      const response = await fetch("/api/collections", { method: "GET" })
+      const data = await response.json()
 
-  useMount(() => {
-    setLoading(true)
-    fetch("/api/collections", { method: "GET" })
-      .then(async (res) => res.json())
-      .then((data) => {
-        const chunked = data.images.reduce((acc: any, _: any, i:number) => {
-          acc[i % 5].push(data.images[i])
-          return acc
-        }, [[], [], [], [], []])
-        setCollections(chunked)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  })
+      if (!response.ok) {
+        throw new Error(data.message)
+      }
+      return data.images;
+    },
+    {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    }
+  );
 
   return {
     collections,

components/main/hooks/useInputGeneration.ts

@@ -1,32 +1,49 @@
 import { useState } from "react"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { Collection } from "@/type"
 
 export const useInputGeneration = () => {
   const [prompt, setPrompt] = useState<string>('')
-  const [loading, setLoading] = useState<boolean>(false)
-
-  const submit = () => {
-    setLoading(true)
-    return new Promise(async (resolve, reject) => {
-      fetch(
-        '/api',
-        {
-          method: 'POST',
-          body: JSON.stringify({
-            inputs: prompt,
-          })
-        }
-      )
-      .then(async res => res.json())
-      .then(data => {
-        console.log(data)
-        resolve(true)
+  const client = useQueryClient()
+
+  const { mutate: submit, isLoading: loading } = useMutation(
+    ["generation"],
+    async () => {
+      client.setQueryData(["collections"], (old) => {
+        return [{
+          id: -1,
+          blob: {
+            type: "image/png",
+            data: new ArrayBuffer(0),
+          },
+          prompt
+        }, ...old as Collection[]]
       })
-      .finally(() => {
-        setLoading(false)
-        resolve(true)
+
+      const response = await fetch("/api", {
+        method: "POST",
+        body: JSON.stringify({
+          inputs: prompt,
+        }),
       })
-    })
-  }
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.message)
+      }
+
+      client.setQueryData(["collections"], (old) => {
+        const newArray = [...old as Collection[]]
+        const index = newArray.findIndex((item: Collection) => item.id === -1)
+
+        newArray[index] = data?.blob as Collection
+
+        return newArray
+      })
+
+      return data ?? []
+    },
+  )
 
   return {
     prompt,