Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update dependencies. #1314

Merged
merged 4 commits into from
Mar 26, 2024
Merged

Update dependencies. #1314

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4428ba7
Update dependencies.
leerob Mar 26, 2024
15fe8a1
Fix
leerob Mar 26, 2024
f0105f9
Suspense
leerob Mar 26, 2024
958e8a5
Prettier
leerob Mar 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions app/product/[handle]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,18 @@ export default async function ProductPage({ params }: { params: { handle: string
<div className="mx-auto max-w-screen-2xl px-4">
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
<div className="h-full w-full basis-full lg:basis-4/6">
<Gallery
images={product.images.map((image: Image) => ({
src: image.url,
altText: image.altText
}))}
/>
<Suspense
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@leerob i know it's old, by can i know why you surrounded the Gallery by Suspense?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it because the Partial Rendering?

fallback={
<div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden" />
}
>
<Gallery
images={product.images.map((image: Image) => ({
src: image.url,
altText: image.altText
}))}
/>
</Suspense>
</div>

<div className="basis-full lg:basis-2/6">
Expand Down
11 changes: 7 additions & 4 deletions components/layout/navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -15,8 +15,9 @@ export default async function Navbar() {
return (
<nav className="relative flex items-center justify-between p-4 lg:px-6">
<div className="block flex-none md:hidden">
<MobileMenu menu={menu} />
</div>
<Suspense fallback={null}>
<MobileMenu menu={menu} />
</Suspense> </div>
<div className="flex w-full items-center">
<div className="flex w-full md:w-1/3">
<Link href="/" className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6">
Expand All @@ -41,7 +42,9 @@ export default async function Navbar() {
) : null}
</div>
<div className="hidden justify-center md:flex md:w-1/3">
<Search />
<Suspense fallback={<SearchSkeleton />}>
<Search />
</Suspense>
</div>
<div className="flex justify-end md:w-1/3">
<Suspense fallback={<OpenCart />}>
Expand Down
8 changes: 5 additions & 3 deletions components/layout/navbar/mobile-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
import { Dialog, Transition } from '@headlessui/react';
import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation';
import { Fragment, useEffect, useState } from 'react';
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();
Expand Down Expand Up @@ -72,7 +72,9 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
</button>

<div className="mb-4 w-full">
<Search />
<Suspense fallback={<SearchSkeleton />}>
<Search />
</Suspense>
</div>
{menu.length ? (
<ul className="flex w-full flex-col">
Expand Down
14 changes: 14 additions & 0 deletions components/layout/navbar/search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
11 changes: 7 additions & 4 deletions components/layout/search/filter/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { SortFilterItem } from 'lib/constants';
import { Suspense } from 'react';
import FilterItemDropdown from './dropdown';
import { FilterItem } from './item';

Expand All @@ -25,11 +26,13 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
</h3>
) : null}
<ul className="hidden md:block">
<FilterItemList list={list} />
</ul>
<Suspense fallback={null}>
<FilterItemList list={list} />
</Suspense> </ul>
<ul className="md:hidden">
<FilterItemDropdown list={list} />
</ul>
<Suspense fallback={null}>
<FilterItemDropdown list={list} />
</Suspense> </ul>
</nav>
</>
);
Expand Down
9 changes: 7 additions & 2 deletions components/product/product-description.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { AddToCart } from 'components/cart/add-to-cart';
import Price from 'components/price';
import Prose from 'components/prose';
import { Product } from 'lib/shopify/types';
import { Suspense } from 'react';
import { VariantSelector } from './variant-selector';

export function ProductDescription({ product }: { product: Product }) {
Expand All @@ -16,7 +17,9 @@ export function ProductDescription({ product }: { product: Product }) {
/>
</div>
</div>
<VariantSelector options={product.options} variants={product.variants} />
<Suspense fallback={null}>
<VariantSelector options={product.options} variants={product.variants} />
</Suspense>

{product.descriptionHtml ? (
<Prose
Expand All @@ -25,7 +28,9 @@ export function ProductDescription({ product }: { product: Product }) {
/>
) : null}

<AddToCart variants={product.variants} availableForSale={product.availableForSale} />
<Suspense fallback={null}>
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />
</Suspense>
</>
);
}
Loading