Better skeleton

vercel · Nov 28, 2023 · c42470a · c42470a
1 parent ac10d46
commit c42470a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
@@ -6,7 +6,7 @@ import { Menu } from 'lib/shopify/types';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
-import Search from './search';
+import Search, { SearchSkeleton } from './search';
 const { SITE_NAME } = process.env;
 
 export default async function Navbar() {
@@ -43,7 +43,7 @@ export default async function Navbar() {
           ) : null}
         </div>
         <div className="hidden justify-center md:flex md:w-1/3">
-          <Suspense fallback={null}>
+          <Suspense fallback={<SearchSkeleton />}>
             <Search />
           </Suspense>
         </div>

diff --git a/components/layout/navbar/mobile-menu.tsx b/components/layout/navbar/mobile-menu.tsx
@@ -7,7 +7,7 @@ import { Fragment, Suspense, useEffect, useState } from 'react';
 
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import { Menu } from 'lib/shopify/types';
-import Search from './search';
+import Search, { SearchSkeleton } from './search';
 
 export default function MobileMenu({ menu }: { menu: Menu[] }) {
   const pathname = usePathname();
@@ -72,7 +72,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                 </button>
 
                 <div className="mb-4 w-full">
-                  <Suspense fallback={null}>
+                  <Suspense fallback={<SearchSkeleton />}>
                     <Search />
                   </Suspense>
                 </div>

diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx
@@ -41,3 +41,17 @@ export default function Search() {
     </form>
   );
 }
+
+export function SearchSkeleton() {
+  return (
+    <form className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+      <input
+        placeholder="Search for products..."
+        className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
+      />
+      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
+        <MagnifyingGlassIcon className="h-4" />
+      </div>
+    </form>
+  );
+}