Merge pull request #316 from mwskwong/canary

Canary
mwskwong · Mar 28, 2024 · d49d464 · d49d464 · vercel · Mar 28, 2024
2 parents c3abdb3 + bbd025a
commit d49d464
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 71 deletions.
diff --git a/app/(main)/blog/[slug]/page.tsx b/app/(main)/blog/[slug]/page.tsx
@@ -87,8 +87,8 @@ const Blog: FC<BlogProps> = async ({ params: { slug } }) => {
                 spacing={1}
                 sx={{ alignItems: 'center', justifyContent: 'space-around' }}
               >
-                <Suspense fallback={<ViewsSkeleton mr={0.75} />}>
-                  <Views blogId={blog.id} mr={0.75} />
+                <Suspense fallback={<ViewsSkeleton sx={{ mx: 0.75 }} />}>
+                  <Views blogId={blog.id} sx={{ mx: 0.75 }} />
                 </Suspense>
                 <CopyUrlButton />
                 <ShareDropdown blog={blog} />

diff --git a/app/(main)/blog/page.tsx b/app/(main)/blog/page.tsx
@@ -124,8 +124,11 @@ const Blogs: FC = async () => {
                         {dateFormatter.format(new Date(createdAt))}
                       </Typography>
                       <Divider orientation="vertical" />
-                      <Suspense fallback={<ViewsSkeleton level="body-sm" />}>
+                      <Suspense
+                        fallback={<ViewsSkeleton hideIcon level="body-sm" />}
+                      >
                         <Views
+                          hideIcon
                           readOnly
                           blogId={id}
                           blogIds={blogIds}

diff --git a/components/blog/views.tsx b/components/blog/views.tsx
@@ -17,6 +17,7 @@ export interface ViewsProps extends Omit<TypographyProps, 'children'> {
   blogIds?: string[];
   blogId: string;
   readOnly?: boolean;
+  hideIcon?: boolean;
 }
 
 const numberFormatter = new Intl.NumberFormat('en', { notation: 'compact' });
@@ -25,6 +26,7 @@ export const Views: FC<ViewsProps> = async ({
   blogIds,
   blogId,
   readOnly = false,
+  hideIcon = false,
   ...props
 }) => {
   const metadata = blogIds
@@ -34,16 +36,28 @@ export const Views: FC<ViewsProps> = async ({
   return (
     <>
       {!readOnly && <IncrBlogView blogId={blogId} />}
-      <Typography startDecorator={<Eye />} {...props}>
+      <Typography startDecorator={!hideIcon && <Eye />} {...props}>
         {numberFormatter.format(metadata?.view ?? 0)} views
       </Typography>
     </>
   );
 };
 
-export type ViewsSkeletonProps = Omit<TypographyProps, 'children'>;
-export const ViewsSkeleton: FC<ViewsSkeletonProps> = (props) => (
-  <Typography startDecorator={<Eye />} {...props}>
+export type ViewsSkeletonProps = Omit<
+  ViewsProps,
+  'blogIds' | 'blogId' | 'readOnly'
+>;
+
+export const ViewsSkeleton: FC<ViewsSkeletonProps> = ({
+  hideIcon,
+  ...props
+}) => (
+  <Typography
+    // FIXME: not using sx prop here to prevent CLS
+    display={hideIcon ? 'flex' : undefined}
+    startDecorator={!hideIcon && <Eye />}
+    {...props}
+  >
     <Skeleton level={props.level} variant="text" width="3ch" />
     &nbsp;views
   </Typography>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "@svgr/webpack": "^8.1.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.11.30",
-    "@types/react": "^18.2.72",
+    "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.22",
     "@vercel/style-guide": "^6.0.0",
     "dotenv-cli": "^7.4.1",