fix: make sure loading skeleton is the same as actual comp (#1005)

Co-authored-by: viet nguyen <vietnguyen@noreply>

src/app/components/LatestContributions.tsx

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react'
+import Link from 'next/link'
+import { ArrowRightIcon } from '@heroicons/react/24/outline'
+
+import { getChangeHistoryServerSide } from '@/js/graphql/contribAPI'
+import { ChangesetCard } from '@/components/edit/RecentChangeHistory'
+
+/**
+ * Show most recent contributions
+ */
+export const LatestContributions: React.FC = async () => {
+  const history = await getChangeHistoryServerSide()
+  return (
+    <Container>
+      {history.splice(0, 10).map(changetset =>
+        <ChangesetCard key={changetset.id} changeset={changetset} />
+      )}
+    </Container>
+  )
+}
+
+/**
+ * Resuable container for actual and skeleton
+ */
+const Container: React.FC<{ children: ReactNode }> = ({ children }) => (
+  <section className='px-4 w-full'>
+    <div className='mt-2 flex items-center justify-between'>
+      <h3>Latest contributions </h3>
+      <Link href='/edit' className='text-sm hover:underline'>See more</Link>
+    </div>
+    <hr className='mb-6 border-1 border-base-content' />
+    <div className='mt-4 flex justify-center flex-row flex-wrap gap-y-10 gap-x-4'>
+      {children}
+    </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
+ */
+export const LatestContributionsSkeleton: React.FC = () => {
+  return (
+    <Container>
+      {[1, 2, 3, 4, 5].map(item => <div key={item} className='w-full bg-base-200/20 h-36 rounded-box' />)}
+    </Container>
+  )
+}

src/app/page.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from 'react'
 import { LandingCTA } from './components/LandingCTA'
 import { LandingHero } from './components/LandingHero'
-import { RecentEdits, RecentEditsSkeleton } from './components/RecentEdits'
+import { LatestContributions, LatestContributionsSkeleton } from './components/LatestContributions'
 import { FinancialContributors } from './components/FinancialContributors'
 import { RecentTags } from './components/RecentTags'
 import { USAToC } from './components/USAToC'
@@ -26,8 +26,8 @@ export default async function Home (): Promise<any> {
           <Annoucement />
         </div>
         <div className='mt-8 lg:mt-0 lg:overflow-y-auto lg:h-[800px] w-full border-2 rounded-box'>
-          <Suspense fallback={<RecentEditsSkeleton />}>
-            <RecentEdits />
+          <Suspense fallback={<LatestContributionsSkeleton />}>
+            <LatestContributions />
           </Suspense>
         </div>
       </div>

src/components/edit/RecentChangeHistory.tsx

@@ -94,7 +94,6 @@ const ClimbChange = ({ changeId, fullDocument, updateDescription, dbOp }: Change
           <UpdatedFields fields={updateDescription?.updatedFields} doc={fullDocument as ClimbType} />
         </div>
       </div>
-      {/* <div className='row-span-2 col-span-2'>{JSON.stringify(updateDescription?.updatedFields)}</div> */}
     </div>
   )
 }
@@ -200,7 +199,7 @@ const operationLabelMap = {
     icon: <ActionIcon icon={<PlusIcon className='w-6 h-6 stroke-base-300 stroke-2' />} clz='bg-success' />
   },
   updateArea: {
-    borderCue: 'border-l-black',
+    borderCue: 'border-l-neutral',
     badge: 'edited an area',
     icon: <ActionIcon icon={<PencilIcon className='w-6 h-6 stroke-base-300' />} />
   },
@@ -215,7 +214,8 @@ const operationLabelMap = {
     icon: <ActionIcon icon={<MinusIcon className='w-6 h-6 stroke-base-300' />} clz='bg-error' />
   },
   updateDestination: {
-    badge: 'badge-warning',
+    borderCue: 'border-l-neutral',
+    badge: 'set destination',
     icon: <ActionIcon icon={<PencilIcon className='w-6 h-6 stroke-base-300' />} />
   },
 
@@ -230,7 +230,7 @@ const operationLabelMap = {
     icon: <ActionIcon icon={<PencilIcon className='w-6 h-6 stroke-base-300' />} clz='bg-error' />
   },
   updateClimb: {
-    borderCue: 'border-l-black',
+    borderCue: 'border-l-neutral',
     badge: 'updated a climb',
     icon: <ActionIcon icon={<PencilIcon className='w-6 h-6 stroke-base-300' />} />
   },
@@ -241,7 +241,7 @@ const operationLabelMap = {
   },
   updateOrganization: {
     badge: 'updated an organization',
-    borderCue: 'border-l-black',
+    borderCue: 'border-l-neutral',
     icon: <ActionIcon icon={<PencilIcon className='w-6 h-6 stroke-base-300' />} />
   },
   deleteOrganization: {