usedebouncecallback

components/base/card/index.js

@@ -22,6 +22,7 @@ const Card = ({
             src={image.url}
             height={image.height}
             width={image.width}
+            loading="eager"
             alt={title}
           />
           <p className={styles.title}>{title}</p>
@@ -34,6 +35,7 @@ const Card = ({
               src={author.image.url}
               height={author.image.height}
               width={author.image.width}
+              loading="eager"
               alt={author}
             />
             <div className={styles.authordescription}>

components/base/search/index.js

 "use client";
 import { useState, useEffect } from "react";
+import { useDebouncedCallback } from "use-debounce";
 import PropTypes from "prop-types";
 import Icons from "@components/base/icons";
 import styles from "./styles.module.css";
 
 const Search = ({ onSearch, onClose }) => {
   const [text, setText] = useState("");
-  useEffect(() => {
-    //after 2 second it will execute
-    const handler = setTimeout(() => {
-      if (text !== "") {
-        onSearch(text);
-      }
-    }, 1000);
 
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [text]);
-  const handleSearch = (value) => {
-    if (value !== "") {
-      setText(value);
-    } else {
-      setText("");
-      onSearch("");
-    }
+  const handleDebounceChange = useDebouncedCallback((value) => {
+    onSearch(value);
+  }, 1000);
+  const handleInputChange = (value) => {
+    setText(value);
+    handleDebounceChange(value);
   };
+
   const handleCustomClear = (e) => {
     e.preventDefault();
     onClose("");
@@ -42,7 +32,7 @@ const Search = ({ onSearch, onClose }) => {
         type="text"
         autoFocus={true}
         value={text}
-        onChange={(e) => handleSearch(e.target.value)}
+        onChange={(e) => handleInputChange(e.target.value)}
         placeholder="Discover news, articles and more"
       />
       {text && (

components/top-level/blog-lists/styles.module.css

@@ -8,12 +8,12 @@
 .blog-container .title {
   line-height: 25px;
   font-weight: 600;
-  padding-inline: 1.5rem;
+  padding-inline: 0.5rem;
   color: var(--title-color);
 }
 .blog-container .description {
   color: var(--font-color-300);
-  padding-inline: 1.5rem;
+  padding-inline: 0.5rem;
   margin-bottom: 2em;
   font-size: clamp(1rem, 0.9rem + 1vw, 1.2rem);
 }

package-lock.json

@@ -22,7 +22,8 @@
         "react-markdown": "^9.0.1",
         "rehype-raw": "^7.0.0",
         "remark": "^15.0.1",
-        "remark-html": "^16.0.1"
+        "remark-html": "^16.0.1",
+        "use-debounce": "^10.0.0"
       },
       "devDependencies": {
         "@storybook/addon-essentials": "^7.5.3",
@@ -18617,6 +18618,17 @@
         }
       }
     },
+    "node_modules/use-debounce": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.0.tgz",
+      "integrity": "sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/use-resize-observer": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",

package.json

@@ -25,7 +25,8 @@
     "react-markdown": "^9.0.1",
     "rehype-raw": "^7.0.0",
     "remark": "^15.0.1",
-    "remark-html": "^16.0.1"
+    "remark-html": "^16.0.1",
+    "use-debounce": "^10.0.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.5.3",