enhancement: update SiteListSkeleton display

opengovsg · Oct 10, 2024 · d2ec9a4 · d2ec9a4
1 parent 31b1601
commit d2ec9a4
Showing 1 changed file with 46 additions and 29 deletions.
diff --git a/apps/studio/src/features/dashboard/SiteList.tsx b/apps/studio/src/features/dashboard/SiteList.tsx
@@ -1,7 +1,6 @@
 import NextLink from "next/link"
 import {
  Card,
- CardHeader,
  Flex,
  Image,
  LinkBox,
@@ -16,6 +15,46 @@ import { NoResultIcon } from "~/components/Svg/NoResultIcon"
 import { withSuspense } from "~/hocs/withSuspense"
 import { trpc } from "~/utils/trpc"
 
+const Site = ({
+ siteId,
+ siteName,
+ siteLogoUrl,
+}: {
+ siteId?: number
+ siteName?: string
+ siteLogoUrl?: string
+}): JSX.Element => {
+ return (
+ <LinkBox>
+ <LinkOverlay href={`/sites/${siteId}`} as={NextLink} />
+ <Flex key={siteId} flexDirection="column" gap="1rem" width="100%">
+ <Image
+ src={siteLogoUrl}
+ alt={siteName}
+ borderRadius="0.5rem"
+ border="1.5px solid"
+ borderColor="base.divider.medium"
+ width="100%"
+ height="100%"
+ objectFit="cover"
+ aspectRatio="1/1"
+ backgroundColor="white"
+ fallbackSrc="/isomer-sites-placeholder.png"
+ />
+ <Text
+ as="h6"
+ textStyle="h6"
+ noOfLines={1}
+ overflow="hidden"
+ textOverflow="ellipsis"
+ >
+ {siteName}
+ </Text>
+ </Flex>
+ </LinkBox>
+ )
+}
+
 const SiteListSection = ({
  children,
 }: {
@@ -70,33 +109,11 @@ const SuspendableSiteList = (): JSX.Element => {
  return (
  <SiteListSection>
  {sites.map((site) => (
- <LinkBox>
- <LinkOverlay href={`/sites/${site.id}`} as={NextLink} />
- <Flex key={site.id} flexDirection="column" gap="1rem" width="100%">
- <Image
- src={site.config.logoUrl}
- alt={site.name}
- borderRadius="0.5rem"
- border="1.5px solid"
- borderColor="base.divider.medium"
- width="100%"
- height="100%"
- objectFit="cover"
- aspectRatio="1/1"
- backgroundColor="white"
- fallbackSrc="/isomer-sites-placeholder.png"
- />
- <Text
- as="h6"
- textStyle="h6"
- noOfLines={1}
- overflow="hidden"
- textOverflow="ellipsis"
- >
- {site.name}
- </Text>
- </Flex>
- </LinkBox>
+ <Site
+ siteId={site.id}
+ siteName={site.name}
+ siteLogoUrl={site.config.logoUrl}
+ />
  ))}
  </SiteListSection>
  )
@@ -108,7 +125,7 @@ const SiteListSkeleton = (): JSX.Element => {
  {[1, 2, 3].map((index) => (
  <Card key={index} width="100%">
  <Skeleton>
- <CardHeader>Loading...</CardHeader>
+ <Site />
  </Skeleton>
  </Card>
  ))}