CLS layout shift improve

rezahedi · Mar 8, 2024 · bac6e06 · bac6e06
1 parent 7eb4259
commit bac6e06
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/components/feed/NewPostBlock.tsx b/src/components/feed/NewPostBlock.tsx
@@ -2,7 +2,7 @@ import { profileProp } from "@/types/firestore"
 
 export default function NewPostBlock(
   {profile, onClick: setShowModal}:
-  {profile: profileProp, onClick: (value: boolean) => void}
+  {profile: profileProp | null, onClick: (value: boolean) => void}
 ) {
 
   const handleClick = () => {
@@ -18,7 +18,7 @@ export default function NewPostBlock(
 
   return (
     <div className="flex gap-2 p-5 bg-white cursor-pointer" onClick={handleClick} onKeyDown={handleKeyDown} tabIndex={0} role="button">
-      <img src={profile.avatars.buddy} alt="avatar" className="size-12 rounded-full" />
+      <img src={profile?.avatars.buddy} alt="avatar" className="size-12 rounded-full" />
       <div className="flex-grow flex items-center p-2 cursor-text text-gray-500 rounded-md border border-gray-300 bg-gray-100 hover:border-gray-500">What's happening?!</div>
     </div>
   )

diff --git a/src/components/post/index.tsx b/src/components/post/index.tsx
@@ -99,7 +99,7 @@ export default function Post(
       <header>
         {post.profile_detail &&
           <Link className='user' to={`/${post.profile_id.id}`}>
-            <img src={post.profile_detail.avatar_url} alt={post.profile_detail.name} loading='lazy' />
+            <img src={post.profile_detail.avatar_url} alt={post.profile_detail.name} width={'3rem'} height={'3rem'} loading='lazy' />
             {post.profile_detail.name}
           </Link>
         }
@@ -122,7 +122,7 @@ export default function Post(
             </Link>
             <p>{post.location}</p>
           </div>
-          <img src={post.media_url} alt={post.title} onDoubleClick={handleLike} loading='lazy' />
+          <img src={post.media_url} alt={post.title} onDoubleClick={handleLike} className='size-full' loading='lazy' />
         </figure>
       </div>
       <footer>

diff --git a/src/pages/feed.tsx b/src/pages/feed.tsx
@@ -54,7 +54,7 @@ export default function Feed() {
 
   return (
     <>
-      {authProfile && <NewPostBlock profile={authProfile} onClick={setShowNewPostModal} />}
+      <NewPostBlock profile={authProfile} onClick={setShowNewPostModal} />
       {showNewPostModal &&
         <Modal onClose={()=>setShowNewPostModal(false)}>
           <NewPost onCancel={()=>setShowNewPostModal(false)} />