fix: add blog item placeholder, add key to blog item skeleton, add bu…

…n lockfile
ryantanrk · Apr 3, 2024 · b1a7a4c · b1a7a4c
1 parent ab0823d
commit b1a7a4c
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 2 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/public/asset/blogplaceholder.png b/public/asset/blogplaceholder.png
diff --git a/src/components/BlogItem/BlogItem.tsx b/src/components/BlogItem/BlogItem.tsx
@@ -10,10 +10,11 @@ interface BlogItemProps {
 }
 
 const BlogItem = ({ title, href, date, imageUrl, style }: BlogItemProps) => {
+  const placeholderUrl = "/asset/blogplaceholder.png";
   return (
     <div className="blog-item" style={style}>
       <a target="_blank" rel="noreferrer noopener" href={href}>
-        <img className="blog-item__image" src={imageUrl} alt={title} />
+        <img className="blog-item__image" src={imageUrl || placeholderUrl} alt={title} />
         <div className="blog-item__row">
           <div className="blog-item__title">{title}</div>
           <div className="blog-item__date">

diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx
@@ -38,7 +38,11 @@ const Home = () => {
   }, []);
 
   // blog display will display skeleton of element before load
-  let blogDisplay: JSX.Element[] = Array(3).fill(<BlogItemSkeleton />);
+  let blogDisplay: JSX.Element[] = [
+    <BlogItemSkeleton key="skeleton-1" />,
+    <BlogItemSkeleton key="skeleton-2" />,
+    <BlogItemSkeleton key="skeleton-3" />
+  ];
 
   if (isLoaded) {
     if (error != null) {