🐛 Issue 698: Search Bug in the Emojipedia Play (reactplay#704)

* Updated emojipedia.js

Issue : According to the bug, the search was happening only after removing the whole word once searched.
Reason : This was happening because the search was being made from the previous search result.
Solution : I have changed the array from which the search was happening, that is, from the whole data every time, instead of searching from the previous data.

* Updated emojipedia.js

After the review, since there was a large amount of data was being present, it was asked  to use useTransition to increase the performance of the app.

Added useTransition to filter out the data, and made the necessary changes.

* Updated emojipedia.js

Co-authored-by: Tapas Adhikary <[email protected]>

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;