From 7e0e62d4ecf8809246581a6408820a173969cc46 Mon Sep 17 00:00:00 2001
From: Henrique Fontenele <henriquedevb@gmail.com>
Date: Thu, 5 Oct 2023 13:30:49 -0300
Subject: [PATCH] feat: add skeleton to loadings

---
 src/app/events/[event]/page.tsx | 28 +++++++++++++++++++++++++++-
 src/app/events/page.tsx         | 21 ++++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/app/events/[event]/page.tsx b/src/app/events/[event]/page.tsx
index bf97fd4..50addcc 100644
--- a/src/app/events/[event]/page.tsx
+++ b/src/app/events/[event]/page.tsx
@@ -193,7 +193,33 @@ export default function Event({ params }: EventProps) {
   }
 
   if (eventQuery.isLoading) {
-    return <p>Carregando dados do evento...</p>
+    return (
+      <main className="animate-pulse pb-8">
+        <div className="mb-8 flex justify-between">
+          <div className="h-[30px] w-[233px] rounded-[4px] bg-neutral-200" />
+          <nav>
+            <div className="flex gap-3">
+              <div className="group relative flex w-[247px] gap-2 overflow-hidden">
+                <div className="h-[40px] w-[150px] rounded-[4px] bg-neutral-200" />
+                <div className="h-[40px] w-[150px] rounded-[4px] bg-neutral-200" />
+              </div>
+            </div>
+          </nav>
+        </div>
+        <div className="mb-2 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="h-[34px] w-[210px] rounded-[4px] bg-neutral-200" />
+            <div>
+              <div className="flex h-[34px] w-[210px] gap-1 rounded-[4px] bg-neutral-200" />
+            </div>
+          </div>
+          <div>
+            <div className="h-[34px] w-[210px] rounded-[4px] bg-neutral-200" />
+          </div>
+        </div>
+        <div className="min-h-screen min-w-full rounded-[4px] bg-neutral-200" />
+      </main>
+    )
   }
 
   return (
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index 1799418..df646f2 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -36,6 +36,26 @@ export default function Events() {
     registerEventMutation.mutate(data)
   }
 
+  if (eventsQuery.isLoading) {
+    return (
+      <main className="animate-pulse pb-8">
+        <div className="mb-4 flex justify-between">
+          <div className="h-[35px] w-[140px] rounded-[4px] bg-neutral-200" />
+
+          <div>
+            <div className="h-[45px] w-[130px] rounded-[4px] bg-neutral-200" />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-3 gap-2">
+          <div className="h-[87px] w-[300px] rounded-[8px] bg-neutral-200" />
+          <div className="h-[87px] w-[300px] rounded-[8px] bg-neutral-200" />
+          <div className="h-[87px] w-[300px] rounded-[8px] bg-neutral-200" />
+        </div>
+      </main>
+    )
+  }
+
   return (
     <div className="flex flex-col justify-between gap-4 font-sans text-neutral-900">
       <div className="flex items-center justify-between">
@@ -48,7 +68,6 @@ export default function Events() {
         />
       </div>
       <div className="grid grid-cols-3 gap-2">
-        {eventsQuery.isLoading && <p>Carregando eventos...</p>}
         {events.length === 0 && eventsQuery.isSuccess && (
           <p>Nenhum evento cadastrado.</p>
         )}