feat: show skeleton for search input while loading data

src/features/toc/ui/Menu/Filter/Filter.tsx

@@ -1,18 +1,24 @@
+import clsx from 'clsx'
+
 import { Input } from '../../../../../components/Input'
-import { useFilterInput } from '../Context/hooks'
+import { Skeleton } from '../../../../../components/Skeleton'
+import { useFilterInput, useIsLoading } from '../Context/hooks'
 
 import styles from './Filter.module.css'
 
 export function Filter(): JSX.Element {
+    const isLoading = useIsLoading()
     const { onChange, isFiltering } = useFilterInput()
 
     return (
-        <div className={styles.filter}>
-            <Input
-                onChange={onChange}
-                isLoading={isFiltering}
-                placeholder='Filter menu'
-            />
+        <div className={clsx(styles.filter)}>
+            {isLoading ? (<Skeleton />) : (
+                <Input
+                    onChange={onChange}
+                    isLoading={isFiltering}
+                    placeholder='Filter menu'
+                />
+            )}
         </div>
     )
 }

src/features/toc/ui/Menu/Menu.tsx

@@ -16,7 +16,7 @@ export function Menu({ toc, activeUrl, isLoading }: MenuProps): JSX.Element {
     return (
         <nav className={styles.menu}>
             <MenuProvider toc={toc} url={activeUrl} isLoading={isLoading}>
-                {!isLoading && <Filter />}
+                <Filter />
                 <List />
             </MenuProvider>
         </nav>

src/features/toc/ui/Menu/__snapshots__/Menu.test.tsx.snap

@@ -87,6 +87,13 @@ exports[`features/toc/ui/Menu > loading > should render skeletons while the TOC
 <nav
   class="_menu_f33640"
 >
+  <div
+    class="_filter_daddd4"
+  >
+    <span
+      class="_skeleton_2cc9eb _loader_daddd4"
+    />
+  </div>
   <ul
     class="_list_ae4333"
   >