crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-13 05:07:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better skeleton

Browse Source
This commit is contained in:
Lee Robinson 2023-11-27 21:32:56 -06:00
parent ac10d46bb1
commit c42470aeba
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/layout/navbar/index.tsx
View File

@ -6,7 +6,7 @@ import { Menu } from 'lib/shopify/types';
import Link from 'next/link'; import Link from 'next/link';
import { Suspense } from 'react'; import { Suspense } from 'react';
import MobileMenu from './mobile-menu'; import MobileMenu from './mobile-menu';
import Search from './search'; import Search, { SearchSkeleton } from './search';
const { SITE_NAME } = process.env; const { SITE_NAME } = process.env;
export default async function Navbar() { export default async function Navbar() {
@ -43,7 +43,7 @@ export default async function Navbar() {
) : null} ) : null}
</div> </div>
<div className="hidden justify-center md:flex md:w-1/3"> <div className="hidden justify-center md:flex md:w-1/3">
<Suspense fallback={null}> <Suspense fallback={<SearchSkeleton />}>
<Search /> <Search />
</Suspense> </Suspense>
</div> </div>

4
components/layout/navbar/mobile-menu.tsx
View File

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

14
components/layout/navbar/search.tsx
View File

@ -41,3 +41,17 @@ export default function Search() {
</form> </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>
);
}