fix: wip feed skeleton ui

src/components/layouts/SkeletonLayout.tsx

@@ -0,0 +1,5 @@
+import { Skeleton, SkeletonProps } from '@chakra-ui/react'
+
+export const SkeletonLayout = (props: SkeletonProps) => {
+  return <Skeleton height="20px" width="100%" borderRadius="8px" {...props} />
+}

src/components/layouts/index.ts

@@ -1,3 +1,4 @@
 export * from './CardLayout'
 export * from './PageLayout'
+export * from './SkeletonLayout'
 export * from './StickToTop'

src/pages/landing/feed/Contributions.tsx

@@ -86,12 +86,12 @@ export const Contributions = () => {
                   width={{
                     base: '100%',
                   }}
-                  maxWidth="600px"
+                  maxWidth="500px"
                 />
                 {index < contributions.length - 1 && (
                   <Divider
                     borderBottomWidth="2px"
-                    maxWidth="600px"
+                    maxWidth="500px"
                     color="brand.200"
                   />
                 )}

src/pages/landing/feed/components/ContributionActivityItem.tsx

@@ -10,6 +10,7 @@ import {
 import { HTMLChakraProps } from '@chakra-ui/system'
 
 import { LightningIcon, SatoshiIconTilted } from '../../../../components/icons'
+import { SkeletonLayout } from '../../../../components/layouts'
 import { ExternalAccountLinkIcon } from '../../../../components/molecules'
 import { renderFunderBadges } from '../../../../components/molecules/projectActivity/renderFunderBadges'
 import {
@@ -156,3 +157,14 @@ export const ContributionActivityItem = ({
     </Box>
   )
 }
+
+export const ContributionActivityItemSkeleton = () => {
+  return (
+    <VStack w="full" maxWidth="500px">
+      <HStack w="full" justifyContent="space-between">
+        <SkeletonLayout width="20%" />
+        <SkeletonLayout width="10%" />
+      </HStack>
+    </VStack>
+  )
+}