Save work before debugging

Author: ania221B

src/SuggestionItem.jsx

@@ -1,7 +1,16 @@
 import { useAppGlobalContext } from './context'
 
 function SuggestionItem ({ suggestion }) {
-  const { selectUserItem } = useAppGlobalContext()
+  const { selectUserItem, isItemLoading } = useAppGlobalContext()
+
+  if (isItemLoading) {
+    return (
+      <li className='item-skeleton br-small'>
+        <div className='item-skeleton__pic'></div>
+        <div className='item-skeleton__name'></div>
+      </li>
+    )
+  }
 
   return (
     <li

src/context.jsx

@@ -9,6 +9,7 @@ function AppContext ({ children }) {
     window.matchMedia('(prefers-color-scheme: dark)').matches
   )
   const [isLoading, setIsLoading] = useState(true)
+  const [isItemLoading, setIsItemLoading] = useState(true)
   const [isError, setIsError] = useState(false)
   const [isIssue, setIsIssue] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
@@ -122,6 +123,7 @@ function AppContext ({ children }) {
    * @returns a list of suggested users
    */
   async function getUserSuggestions (inputString) {
+    setIsItemLoading(true)
     setIsError(false)
     if (!inputString) {
       setSuggestionList([])
@@ -142,12 +144,14 @@ function AppContext ({ children }) {
     } catch (error) {
       setIsError(true)
     }
+    setIsItemLoading(false)
   }
 
   /**
    * Fetches more suggested items from subsequent pages of results
    */
   async function getMoreSuggestions () {
+    setIsItemLoading(true)
     setIsError(false)
     try {
       const response = await axios.get(
@@ -183,6 +187,7 @@ function AppContext ({ children }) {
     } catch (error) {
       setIsError(true)
     }
+    setIsItemLoading(false)
   }
 
   /**
@@ -248,6 +253,7 @@ function AppContext ({ children }) {
     <AppGlobalContext.Provider
       value={{
         isLoading,
+        isItemLoading,
         isError,
         isIssue,
         setIsError,