Implement skeleton on load

marcopollivier · Feb 4, 2024 · 4ab92e7 · 4ab92e7
1 parent 69cd88f
commit 4ab92e7
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 39 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -7,6 +7,7 @@
     "@heroicons/react": "^2.1.1",
     "axios": "^1.6.7",
     "moment": "^2.30.1",
+    "primereact": "^10.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",

diff --git a/ui/src/components/EventList.tsx b/ui/src/components/EventList.tsx
@@ -1,19 +1,29 @@
 import { Event } from '../props/generated';
 import EventCard from '../organisms/EventCard';
-import { Filters } from '../organisms/FilterButton';
 
 interface EventListProps {
     events: Event[]
+    loading: boolean
 }
 
-export default function EventList({ events }: EventListProps) {
+export default function EventList({ events, loading }: EventListProps) {
     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">
-                    {events !== null ? events.map((event) => (
-                        <EventCard event={event} />
-                    )) : null}
+                    {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)
+                    }
                 </div>
             </div>
         </div>

diff --git a/ui/src/main.css b/ui/src/main.css
@@ -1,3 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer tailwind-base, primereact, tailwind-utilities;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+
+@layer tailwind-utilities {
+  @tailwind components;
+  @tailwind utilities;
+}
diff --git a/ui/src/organisms/EventCard.tsx b/ui/src/organisms/EventCard.tsx
@@ -3,9 +3,10 @@ import { UserGroupIcon } from '@heroicons/react/20/solid';
 import { Event } from '../props/generated';
 import EventModal from './EventModal';
 import Moment from 'moment';
+import { Skeleton } from 'primereact/skeleton';
 
 interface EventCardProps {
-    event: Event
+    event: Event | null
 }
 
 export default function EventList({ event }: EventCardProps) {
@@ -14,37 +15,61 @@ export default function EventList({ event }: EventCardProps) {
 
     return (
         <>
-            <EventModal event={event} openDetails={openDetails} onClose={() => { setOpenDetails(false) }} />
-            <div key={event.title} className="group relative" onClick={() => { setOpenDetails(true) }}>
-                <div className="relative flex items-center h-80 sm:h-64 w-full overflow-hidden rounded-lg bg-gray-300 group-hover:opacity-75">
-                    <img src={event.banner} />
-                </div>
+            {event !== null
+                ? (<EventModal event={event} openDetails={openDetails} onClose={() => { setOpenDetails(false) }} />)
+                : null
+            }
+            <div key={event?.title} className="group relative" onClick={() => { setOpenDetails(true) }}>
+                {event !== null
+                    ? (<div className="relative flex items-center h-64 w-full overflow-hidden rounded-lg bg-gray-300 group-hover:opacity-75">
+                        <img src={event.banner} />
+                    </div>)
+                    : (<Skeleton
+                        width="100%"
+                        height="16rem"
+                        className="relative flex items-center h-64 w-full overflow-hidden rounded-lg bg-gray-300 group-hover:opacity-75"
+                    />)}
                 <div className="mt-2 flex flex-1 items-center justify-between">
                     <div>
-                        <p className="text-base font-semibold text-gray-900">{event.title}</p>
-                        <h3 className="text-sm text-gray-500">
-                            <a>
-                                <span className="absolute inset-0" />
-                                {Moment(event.begin)?.format('DD/MM')} - {Moment(event.end)?.format('DD/MM')}
-                            </a>
-                        </h3>
-                        <h3 className="text-sm text-gray-500">
-                            {event.venues !== null ? event.venues?.map((venue) => (
-                                <div>
+                        {event !== null
+                            ? (<>
+                                <p className="text-base font-semibold text-gray-900">{event?.title}</p>
+                                <h3 className="text-sm text-gray-500">
                                     <a>
                                         <span className="absolute inset-0" />
-                                        {venue.city}
+                                        {Moment(event?.begin)?.format('DD/MM')} - {Moment(event?.end)?.format('DD/MM')}
                                     </a>
-                                </div>
-                            )) : null}
-                        </h3>
+                                </h3>
+                                <h3 className="text-sm text-gray-500">
+                                    {event?.venues !== null ? event?.venues?.map((venue) => (
+                                        <div>
+                                            <a>
+                                                <span className="absolute inset-0" />
+                                                {venue?.city}
+                                            </a>
+                                        </div>
+                                    )) : null}
+                                </h3>
+                            </>)
+                            : (<>
+                                <Skeleton width="15rem" className="mb-2" />
+                                <Skeleton width="5rem" height=".5rem" />
+                                <Skeleton width="8rem" height=".5rem" />
+                            </>)}
                     </div>
-                    {event?.attendees !== null ? (
+                    {event !== null ? (
                         <div className="flex rounded-full bg-gray-200 px-4 py-1 text-center font-medium text-gray-600 text-xs self-start">
                             <UserGroupIcon className="-ml-0.5 mr-1.5 h-5 w-5 text-blue-500" aria-hidden="true" />
                             <a>{event?.attendees?.length}</a>
                         </div>
-                    ) : null}
+                    ) : (
+                        <Skeleton
+                            width="3.7rem"
+                            height="1.5rem"
+                            borderRadius="16px"
+                            className="rounded-full bg-gray-200 px-4 py-1 text-center font-medium text-gray-600 text-xs self-start"
+                        />
+                    )}
                 </div>
             </div>
         </>

diff --git a/ui/src/pages/Lending.tsx b/ui/src/pages/Lending.tsx
@@ -7,10 +7,13 @@ import EventList from "../components/EventList";
 import { Props, Event as EventType } from "../props/generated";
 import { Filters } from '../organisms/FilterButton';
 import axios from 'axios';
+import { PrimeReactProvider } from 'primereact/api';
+import Tailwind from 'primereact/passthrough/tailwind';
 
 export default function Lending({ Events, User, MainTag, Tags, Cities }: Props) {
 
     const [events, setEvents] = useState(Events);
+    const [loading, setLoading] = useState(false);
     const [page, setPage] = useState(0);
     const [filters, setFilters] = useState<Filters>({
         name: "",
@@ -21,8 +24,10 @@ export default function Lending({ Events, User, MainTag, Tags, Cities }: Props)
     });
 
     const onFilterChange = async (f: Filters) => {
+        setLoading(true)
         setFilters(f);
         const e = await requestEvents(0, f);
+        setLoading(false)
         setPage(0);
         setEvents(e);
     }
@@ -34,13 +39,15 @@ export default function Lending({ Events, User, MainTag, Tags, Cities }: Props)
     }
 
     return (
-        <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} />
-            <NextPageBanner onClick={() => onRequestNewPage} />
-            <AdBanner />
-            <Footer />
-        </div>
+        <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} />
+                <AdBanner />
+                <Footer />
+            </div>
+        </PrimeReactProvider>
     );
 }
 

diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{ts,tsx,js,jsx}"],
+  content: [
+    "./src/**/*.{ts,tsx,js,jsx}",
+    "./node_modules/primereact/**/*.{js,ts,jsx,tsx}",
+  ],
   theme: {
     extend: {},
   },