Update PostCard image lazy loading

* update navbar handleclick type

components/NavBar.tsx

@@ -77,14 +77,16 @@ const menu: MenuItem[] = [
   },
 ];
 
+export type HandleMenuClick = (
+  // eslint-disable-next-line no-unused-vars
+  e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,
+  // eslint-disable-next-line no-unused-vars
+  path?: string
+) => void;
+
 interface MenuListProps {
   boxBg: string;
-  handleMenuClick: (
-    // eslint-disable-next-line no-unused-vars
-    e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,
-    // eslint-disable-next-line no-unused-vars
-    path?: string
-  ) => void;
+  handleMenuClick: HandleMenuClick;
 }
 const MenuList: FC<MenuListProps> = React.memo(function MenuList({
   boxBg,

components/PostCard.tsx

@@ -7,11 +7,11 @@ import { useAppDispatch } from 'app/hooks';
 import { setFromPath } from 'features/router/routerSlice';
 import { useRouter } from 'next/router';
 import useGetColors from 'lib/hooks/useGetColors';
-import useLazyLoad from 'lib/hooks/useLazyload';
 import dynamic from 'next/dynamic';
 import useIntersection from 'lib/hooks/useIntersection';
 
 const Date = dynamic(() => import('./DateFormater'));
+const ImageSpinner = dynamic(() => import('components/ImageSpinner'));
 
 interface Props {
   post: AllPostsData;
@@ -21,7 +21,6 @@ const PostCard: FC<Props> = ({ post }) => {
   const dispatch = useAppDispatch();
   const router = useRouter();
 
-  const { initSrc, targetRef } = useLazyLoad(post.index_img);
   const { targetRef: cardRef, inView } = useIntersection();
 
   const { boxBg, textColor, headingColor } = useGetColors();
@@ -54,12 +53,14 @@ const PostCard: FC<Props> = ({ post }) => {
             _focus={{ boxShadow: 'unset' }}
           >
             <Image
-              ref={targetRef}
-              src={initSrc}
               maxH="18rem"
+              h={['unset', 'unset', '18rem']}
+              src={post.index_img}
               w="100%"
               fit="cover"
               alt="Post image"
+              loading="lazy"
+              fallback={<ImageSpinner />}
             />
           </Link>
         )}

components/nav/NavItem.tsx

@@ -1,15 +1,11 @@
 import { Flex, Icon, Text } from '@chakra-ui/react';
-import { FC, MouseEvent, useEffect } from 'react';
+import { FC, useEffect } from 'react';
 import { MenuItem } from 'components/NavBar';
 import { useRouter } from 'next/router';
+import type { HandleMenuClick } from 'components/NavBar';
 
 interface Props {
-  handleMenuClick: (
-    // eslint-disable-next-line no-unused-vars
-    e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,
-    // eslint-disable-next-line no-unused-vars
-    path?: string
-  ) => void;
+  handleMenuClick: HandleMenuClick;
   menuItem: MenuItem;
 }