added lazyload to template model images (#1847)

frontend/src/HomePage/Header.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback } from 'react';
 import { SearchBox } from '@/_components/SearchBox';
 import { Button, ButtonGroup, Dropdown } from 'react-bootstrap';
 import { debounce } from 'lodash';
@@ -14,9 +14,7 @@ export default function Header({
   showTemplateLibraryModal,
   fileInput,
 }) {
-  const debouncedChangeHandler = useCallback(
-    debounce(onSearchSubmit, 300)
-  , []);
+  const debouncedChangeHandler = useCallback(debounce(onSearchSubmit, 300), []);
   return (
     <div className="row">
       <div className="col-4">

frontend/src/HomePage/TemplateLibraryModal/TemplateDisplay.jsx

@@ -1,12 +1,21 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Container, Row, Badge } from 'react-bootstrap';
+import LazyLoad from 'react-lazyload';
 import { getSvgIcon } from '@/_helpers/appUtils';
 
 export default function TemplateDisplay(props) {
   const { id, name, description, sources } = props?.app ?? {};
+  const componentRef = useRef(null);
+  const [isloaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    if (componentRef.current) {
+      setLoaded(true);
+    }
+  }, [componentRef]);
 
   return (
-    <div className="template-display">
+    <div className="template-display" ref={componentRef}>
       <Container fluid className="pt-2">
         <Row style={{ height: '10%' }}>
           <h3 className="title">{name}</h3>
@@ -40,7 +49,14 @@ export default function TemplateDisplay(props) {
           </span>
         </Row>
         <Row className="align-items-center justify-content-center" style={{ height: '88%' }}>
-          <img className="template-image" src={`/assets/images/templates/${id}${props.darkMode ? '-dark' : ''}.png`} />
+          {isloaded && (
+            <LazyLoad>
+              <img
+                className="template-image"
+                src={`/assets/images/templates/${id}${props.darkMode ? '-dark' : ''}.png`}
+              />
+            </LazyLoad>
+          )}
         </Row>
       </Container>
     </div>

frontend/src/_components/SearchBox.jsx

@@ -7,7 +7,6 @@ export function SearchBox({ onSubmit }) {
   const handleChange = (e) => {
     setSearchText(e.target.value);
     onSubmit(e.target.value);
-    
   };
 
   return (
@@ -31,13 +30,7 @@ export function SearchBox({ onSubmit }) {
             <line x1="21" y1="21" x2="15" y2="15" />
           </svg>
         </span>
-        <input
-          type="text"
-          value={searchText}
-          onChange={handleChange}
-          className="form-control"
-          placeholder="Search"
-        />
+        <input type="text" value={searchText} onChange={handleChange} className="form-control" placeholder="Search" />
       </div>
     </div>
   );