lw7: add loading shimmers on tickets page

apps/www/components/LaunchWeek/Ticket/TicketsGrid.tsx

@@ -6,9 +6,10 @@ import { useMobileViewport } from '../../../hooks/useMobileViewport'
 interface Props {
   loadedUsers: any[]
   isLoading: boolean
+  pageCount: number
 }
 
-export default function TicketsGrid({ loadedUsers, isLoading }: Props) {
+export default function TicketsGrid({ loadedUsers, isLoading, pageCount }: Props) {
   const STORAGE_URL = 'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lw7'
   const getOgUrl = (username: string) => `${STORAGE_URL}/tickets/gallery/${username}.png`
   const isMobile = useMobileViewport(768)
@@ -58,7 +59,23 @@ export default function TicketsGrid({ loadedUsers, isLoading }: Props) {
         )
       })}
       {/* TODO: Add PAGE_COUNT length skeleton loaders when loading */}
-      {isLoading && <div className="relative rounded-lg bg-slate-100 h-0 w-full pt-[50%]" />}
+      {/* {isLoading && <IconLoader />} */}
+      {isLoading &&
+        Array.from({ length: pageCount }, (_, i) => (
+          <motion.div
+            className="relative rounded-lg bg-scale-500 h-0 w-full pt-[50%] shimmering-loader"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{
+              opacity: 1,
+              y: 0,
+              transition: {
+                duration: 0.4,
+                ease: [0.24, 0.25, 0.05, 1],
+                delay: i / 15,
+              },
+            }}
+          />
+        ))}
     </div>
   )
 }

apps/www/pages/launch-week/tickets/index.tsx

@@ -61,13 +61,13 @@ export default function TicketsPage({ users }: Props) {
 
   const loadMoreUsers = async (offset: number) => {
     if (isLast) return
-    setOffset((prev) => prev + 1)
     setIsLoading(true)
+    setOffset((prev) => prev + 1)
     const { data: users } = await loadUsers(offset, PAGE_COUNT)
     console.log(`loaded users (offset ${offset}): `, users)
     setLoadedUsers((prevUsers) => [...prevUsers, ...(users as any[])])
-    setIsLoading(false)
     if ((users as any[]).length < PAGE_COUNT) setIsLast(true)
+    setIsLoading(false)
   }
 
   useEffect(() => {
@@ -85,7 +85,7 @@ export default function TicketsPage({ users }: Props) {
   useEffect(() => {
     window.addEventListener(
       'scroll',
-      debounce(() => !isLast && isBottomInView(), 500)
+      debounce(() => !isLast && isBottomInView(), 200)
     )
 
     return () => {
@@ -138,7 +138,7 @@ export default function TicketsPage({ users }: Props) {
               </motion.div>
             </div>
             <div ref={ref}>
-              <TicketsGrid loadedUsers={loadedUsers} isLoading={isLoading} />
+              <TicketsGrid loadedUsers={loadedUsers} isLoading={isLoading} pageCount={PAGE_COUNT} />
             </div>
           </SectionContainer>
         </div>