From 7ce34fdf266195d88f32e494b43ca892f0d670c7 Mon Sep 17 00:00:00 2001
From: Everest <caioeverest.b@gmail.com>
Date: Sun, 4 Feb 2024 01:10:05 -0300
Subject: [PATCH] add effect on card loading

---
 ui/src/components/EventList.tsx | 45 +++++++++++++++++++++++----------
 ui/src/pages/Lending.tsx        | 15 +++++++----
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/ui/src/components/EventList.tsx b/ui/src/components/EventList.tsx
index 5592aea..40afa32 100644
--- a/ui/src/components/EventList.tsx
+++ b/ui/src/components/EventList.tsx
@@ -1,5 +1,6 @@
 import { Event } from '../props/generated';
 import EventCard from '../organisms/EventCard';
+import { Transition } from '@headlessui/react';
 
 interface EventListProps {
     events: Event[]
@@ -7,23 +8,41 @@ interface EventListProps {
 }
 
 export default function EventList({ events, loading }: EventListProps) {
+
+    const numberOfSkeleton = () => {
+        return 6 - (events?.length % 6)
+    }
+
     return (
         <div>
             <div className="mx-auto py-8 lg:max-w-none">
                 <div className="space-y-12 lg:grid lg:grid-cols-3 lg:gap-8 lg:space-y-0">
-                    {loading
-                        ? (
-                            <>
-                                <EventCard event={null} />
-                                <EventCard event={null} />
-                                <EventCard event={null} />
-                                <EventCard event={null} />
-                                <EventCard event={null} />
-                                <EventCard event={null} />
-                            </>
-                        )
-                        : (events !== null ? events.map((event) => (<EventCard event={event} />)) : null)
-                    }
+                    {events?.length > 0 ? events.map((event) => (
+                        <Transition
+                            show={events?.length > 0}
+                            enter="transform transition duration-[400ms]"
+                            enterFrom="opacity-0 rotate-[-120deg] scale-50"
+                            enterTo="opacity-100 rotate-0 scale-100"
+                            leave="transform duration-200 transition ease-in-out"
+                            leaveFrom="opacity-100 rotate-0 scale-100 "
+                            leaveTo="opacity-0 scale-95 "
+                        >
+                            <EventCard event={event} />
+                        </Transition>
+                    )) : null}
+                    {Array(numberOfSkeleton()).fill(0).map((_) => (
+                        <Transition
+                            show={loading}
+                            enter="transform transition duration-[400ms]"
+                            enterFrom="opacity-0 rotate-[-120deg] scale-50"
+                            enterTo="opacity-100 rotate-0 scale-100"
+                            leave="transform duration-200 transition ease-in-out"
+                            leaveFrom="opacity-100 rotate-0 scale-100 "
+                            leaveTo="opacity-0 scale-95 "
+                        >
+                            <EventCard event={null} />
+                        </Transition>
+                    ))}
                 </div>
             </div>
         </div>
diff --git a/ui/src/pages/Lending.tsx b/ui/src/pages/Lending.tsx
index b84b5a0..3ff580f 100644
--- a/ui/src/pages/Lending.tsx
+++ b/ui/src/pages/Lending.tsx
@@ -24,18 +24,23 @@ export default function Lending({ Events, User, MainTag, Tags, Cities }: Props)
     });
 
     const onFilterChange = async (f: Filters) => {
-        setLoading(true)
+        setLoading(true);
         setFilters(f);
+        setEvents([]);
         const e = await requestEvents(0, f);
-        setLoading(false)
+        setLoading(false);
         setPage(0);
         setEvents(e);
     }
 
     const onRequestNewPage = async () => {
+        setLoading(true);
         const e = await requestEvents(page + 1, filters);
-        setPage(page + 1);
-        setEvents(events.concat(e));
+        if (e.length > 0) {
+            setPage(page + 1);
+            setEvents(events.concat(e));
+        }
+        setLoading(false);
     }
 
     return (
@@ -43,7 +48,7 @@ export default function Lending({ Events, User, MainTag, Tags, Cities }: Props)
             <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
                 <Header user={User} currentPage={MainTag} tags={Tags} cities={Cities} onFilterChange={onFilterChange} />
                 <EventList events={events} loading={loading} />
-                <NextPageBanner onClick={() => onRequestNewPage} />
+                <NextPageBanner onClick={onRequestNewPage} />
                 <AdBanner />
                 <Footer />
             </div>