diff --git a/src/plays/emojipedia/Emojipedia.js b/src/plays/emojipedia/Emojipedia.js
index b3572952f..09d588982 100644
--- a/src/plays/emojipedia/Emojipedia.js
+++ b/src/plays/emojipedia/Emojipedia.js
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, useTransition } from "react";
 import toast, { Toaster } from "react-hot-toast";
 import { FiSearch } from "react-icons/fi";
 
@@ -13,11 +13,12 @@ function Emojipedia(props) {
   // Your Code Start below.
   const [emojisList, setEmojisList] = useState([]);
   const [query, setQuery] = useState("");
+  const [isPending, startTransition] = useTransition();
   const inputRef = useRef(null);
-
+  
   // Fetch all the emojis
   const { data, loading, error } = useFetch(API_BASE_URL);
-
+  
   const handleEmojiSearch = (e) => setQuery(e.target.value);
 
   // Copy emoji handler
@@ -32,18 +33,18 @@ function Emojipedia(props) {
   useEffect(() => {
     const delayFn = setTimeout(() => {
       if (query) {
-        setEmojisList((prevEmojiList) =>
-          prevEmojiList?.filter((emoji) =>
-            emoji?.unicodeName?.toLowerCase().includes(query?.toLowerCase())
-          )
-        );
+        startTransition(()=> {
+            setEmojisList(data.filter((emoji) =>
+              emoji?.unicodeName?.toLowerCase().includes(query?.toLowerCase())
+            )
+          );
+        })
       } else {
         setEmojisList(data);
       }
     }, 300);
-
     return () => clearTimeout(delayFn);
-  }, [query, data, emojisList]);
+  }, [query, data]);
 
   useEffect(() => {
     if (error) {
@@ -85,7 +86,11 @@ function Emojipedia(props) {
                 ? Array.from(Array(25).keys()).map((_, index) => (
                     <SkeletonCard key={index} />
                   ))
-                : emojisList?.map((emoji, index) => (
+                : isPending ? 
+                    Array.from(Array(25).keys()).map((_, index) => (
+                      <SkeletonCard key={index} />
+                    )) :
+                    emojisList?.map((emoji, index) => (
                     <EmojiCard
                       key={index}
                       emoji={emoji}
@@ -115,4 +120,4 @@ function Emojipedia(props) {
   );
 }
 
-export default Emojipedia;
+export default Emojipedia;
\ No newline at end of file