fix: improve CTA

feat: add loading skeleton to recent edits

src/app/components/LandingCTA.tsx

@@ -1,11 +1,11 @@
 import clx from 'classnames'
-
 import { LoginButtonClient } from './LoginButton'
 import { ShowEmailJS } from './ShowEmailJS'
+import { ReactNode } from 'react'
 
 export const LandingCTA: React.FC = () => {
   return (
-    <div className='w-full'>
+    <div className='w-full bg-gradient-to-r from-blue-500/40 to-emerald-500/80 rounded-box p-4 md:p-10'>
       <div className='flex flex-rows flex-wrap gap-6 justify-center'>
         <Card4All />
         <Card4Coders />
@@ -20,7 +20,12 @@ const Card4Coders: React.FC = () => {
   return (
     <Card
       title='Coders'
-      body='Fix a bug. Use OpenBeta API & data in your projects.'
+      body={
+        <ul>
+          <li>☑️ Fix a bug.</li>
+          <li>☑️ Use OpenBeta API & data in your projects.</li>
+        </ul>
+      }
       action={
         <>
           <a href='https://docs.openbeta.io/how-to-contribute/overview' className='text-sm underline'>Dev onboarding</a>
@@ -35,7 +40,12 @@ const Card4All: React.FC = () => {
   return (
     <Card
       title='Climbers'
-      body='Add missing climbs.  Help us make your local climbing&lsquo;s area page even better!'
+      body={
+        <ul>
+          <li>☑️ Add missing climbs</li>
+          <li>☑️ Help us make your local climbing&#39;s area page even better!</li>
+        </ul>
+      }
       action={<LoginButtonClient className='btn btn-primary btn-sm px-4 btn-outline' label='Login' />}
     />
   )
@@ -63,7 +73,7 @@ const Donate: React.FC = () => {
 
 interface CTACardProps {
   title: string
-  body: string
+  body: string | ReactNode
   action: React.ReactNode
   className?: string
 }
@@ -74,7 +84,7 @@ const Card: React.FC<CTACardProps> = ({ title, body, action, className }) => {
       <h2 className='font-medium text-base-content/60 uppercase'>{title}</h2>
       <div className={clx('px-4 card card-bordered max-w-sm bg-base-100 shadow-lg', className)}>
         <div className='card-body'>
-          <p>{body}</p>
+          <div>{body}</div>
           <div className='card-actions justify-end items-center gap-x-4 py-2'>
             {action}
           </div>

src/app/components/LandingHero.tsx

@@ -1,13 +1,8 @@
-import Heart from '@/assets/icons/heart-hero'
-
 export const LandingHero: React.FC = () => {
   return (
-    <section className='w-full rounded-box p-10 flex justify-center'>
-      <div className='flex flex-wrap justify-center items-center gap-10'>
-        <span className='text-4xl md:text-6xl tracking-tight'>Knowledge</span>
-        <span className='align-text-bottom font-semibold text-2xl'>+</span>
-        <span className='-translate-y-1 -rotate-6 font-bold text-4xl md:text-6xl tracking-tight hero-text-shadow'>You</span> <span className='font-semibold text-2xl'>=</span> <Heart className='h-16 w-16' />
-      </div>
+    <section className='w-full rounded-box pt-12 pb-24 px-16 text-center'>
+      <h1 className='text-2xl md:text-5xl tracking-tighter font-semibold'>Share your climbing route knowledge!</h1>
+      <p className=''>Join OpenBeta and help build a community resource for climbers</p>
     </section>
   )
 }

src/app/components/RecentEdits.tsx

@@ -1,9 +1,17 @@
+import Link from 'next/link'
 import { ArrowRightIcon } from '@heroicons/react/24/outline'
 
 import { getChangeHistoryServerSide } from '@/js/graphql/contribAPI'
 import { ChangesetRow } from '@/components/edit/RecentChangeHistory'
-import Link from 'next/link'
 
+/**
+ * Cache time in seconds
+ */
+export const revalidate = 300
+
+/**
+ * Show most recent edits
+ */
 export const RecentEdits: React.FC = async () => {
   const history = await getChangeHistoryServerSide()
   return (
@@ -15,11 +23,32 @@ export const RecentEdits: React.FC = async () => {
       <hr className='mb-6 border-2 border-base-content' />
       <div className='mt-4 flex justify-center flex-row flex-wrap gap-y-10 gap-x-4'>
         {history.splice(0, 10).map(changetset =>
-          <ChangesetRow key={changetset.id} changeset={changetset} />)}
+          <ChangesetRow key={changetset.id} changeset={changetset} />
+        )}
+
       </div>
       <div className='flex justify-center py-10'>
         <Link href='/edit' className='btn btn-sm btn-outline'>See more <ArrowRightIcon className='w-4 h-4' /></Link>
       </div>
     </section>
   )
 }
+
+/**
+ * Loading skelton.
+ * Todo: somehow reuse the structure and css from the real component
+ */
+export const RecentEditsSkeleton: React.FC = () => {
+  return (
+    <section className='px-4 w-full'>
+      <div className='flex items-center justify-between'>
+        <h2>Recent edits</h2>
+        <Link href='/edit' className='text-sm hover:underline'>See more</Link>
+      </div>
+      <hr className='mb-6 border-2 border-base-content' />
+      <div className='mt-4 flex justify-center flex-row flex-wrap gap-y-10 gap-x-4'>
+        {[1, 2, 3, 4, 5].map(item => <div key={item} className='animate-pulse w-full bg-base-200/30 h-36 rounded-box' />)}
+      </div>
+    </section>
+  )
+}

src/app/components/RecentTags.tsx

@@ -1,6 +1,11 @@
 import { RecentImageCard } from '@/components/home/RecentMediaCard'
 import { getMediaForFeed } from '@/js/graphql/api'
 
+/**
+ * Cache time in seconds
+ */
+export const revalidate = 300
+
 /**
  * Horizontal gallery of recent images with tags
  */

src/app/page.tsx

@@ -1,20 +1,23 @@
+import { Suspense } from 'react'
 import { LandingCTA } from './components/LandingCTA'
 import { LandingHero } from './components/LandingHero'
-import { RecentEdits } from './components/RecentEdits'
+import { RecentEdits, RecentEditsSkeleton } from './components/RecentEdits'
 import { RecentTags } from './components/RecentTags'
 import { USAToC } from './components/USAToC'
 
 export default async function Home (): Promise<any> {
   return (
     <div className='mt-8 w-full flex flex-col gap-y-24'>
       <div className='lg:pl-4 lg:grid lg:grid-cols-3'>
-        <div className='col-span-2 pb-10 bg-gradient-to-r from-cyan-500/40 to-blue-500/60 rounded-box'>
+        <div className='col-span-2 pb-10 rounded-box'>
           <LandingHero />
           <LandingCTA />
           <p className='mt-12 px-10 text-center text-sm'>Our website is undergoing a facelift. Visit the <a href='/classic' className='underline'>old home</a>. <br /><span className='text-base-content/60'>Questions or comments? <a href='mailto:[email protected]'>[email protected]</a></span></p>
         </div>
         <div className='mt-8 lg:mt-0 lg:overflow-y-auto lg:h-[800px] w-full'>
-          <RecentEdits />
+          <Suspense fallback={<RecentEditsSkeleton />}>
+            <RecentEdits />
+          </Suspense>
         </div>
       </div>
       <RecentTags />