add effect on card loading

marcopollivier · Feb 4, 2024 · 7ce34fd · 7ce34fd
1 parent 4ab92e7
commit 7ce34fd
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 18 deletions.
diff --git a/ui/src/components/EventList.tsx b/ui/src/components/EventList.tsx
@@ -1,29 +1,48 @@
 import { Event } from '../props/generated';
 import EventCard from '../organisms/EventCard';
+import { Transition } from '@headlessui/react';
 
 interface EventListProps {
     events: Event[]
     loading: boolean
 }
 
 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
@@ -24,26 +24,31 @@ 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 (
         <PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
             <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>