react-boilerplate#9: add lazy loading img

Thinh922001 · Sep 25, 2024 · 0f36306 · 0f36306
1 parent 1fd934b
commit 0f36306
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 5 deletions.
diff --git a/src/app/components/Header/sub-menu.tsx b/src/app/components/Header/sub-menu.tsx
@@ -17,7 +17,7 @@ export const SubMenu: React.FC<SubMenuProps> = ({ data = [], title = '' }) => {
             return (
               <A href="#!" key={index}>
                 <SubMenuItem>
-                  <ItemImg src={e.img} />
+                  <ItemImg src={e.img} alt={e.desc} loading="lazy" />
                   <ItemDesc>{e.desc}</ItemDesc>
                 </SubMenuItem>
               </A>

diff --git a/src/app/pages/MyHomePage/components/render-cate-items.tsx b/src/app/pages/MyHomePage/components/render-cate-items.tsx
@@ -3,9 +3,9 @@ import styled from 'styled-components/macro';
 
 export const renderCategoryItems = (items: SubMenuType[]) =>
   items.map((item, index) => (
-    <A key={index}>
+    <A key={index} href="#!">
       <CateItem>
-        <CateImg src={item.img} alt={item.desc} />
+        <CateImg src={item.img} alt={item.desc} loading="lazy" />
         <CateDesc>{item.desc}</CateDesc>
       </CateItem>
     </A>

diff --git a/src/app/pages/MyHomePage/index.tsx b/src/app/pages/MyHomePage/index.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
-import MyHeader from 'app/components/Header';
-import styled from 'styled-components/macro';
 import { Container } from 'app/components/container';
 import { Banner } from './components/banner';
 import { Category } from './components/category';