diff --git a/app/@navbar/default.tsx b/app/@navbar/default.tsx
new file mode 100644
index 0000000000..191cea595f
--- /dev/null
+++ b/app/@navbar/default.tsx
@@ -0,0 +1,3 @@
+import Navbar from 'app/@navbar/page';
+
+export default Navbar;
diff --git a/components/layout/navbar/mobile-menu.tsx b/app/@navbar/mobile-menu.tsx
similarity index 90%
rename from components/layout/navbar/mobile-menu.tsx
rename to app/@navbar/mobile-menu.tsx
index 9091f93d3b..0544b4897d 100644
--- a/components/layout/navbar/mobile-menu.tsx
+++ b/app/@navbar/mobile-menu.tsx
@@ -3,13 +3,18 @@
 import { Dialog, Transition } from '@headlessui/react';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { Fragment, Suspense, useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import { Menu } from 'lib/shopify/types';
-import Search, { SearchSkeleton } from './search';
 
-export default function MobileMenu({ menu }: { menu: Menu[] }) {
+export default function MobileMenu({
+  menu,
+  children
+}: {
+  menu: Menu[];
+  children: React.ReactNode;
+}) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const [isOpen, setIsOpen] = useState(false);
@@ -71,11 +76,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                   <XMarkIcon className="h-6" />
                 </button>
 
-                <div className="mb-4 w-full">
-                  <Suspense fallback={<SearchSkeleton />}>
-                    <Search />
-                  </Suspense>
-                </div>
+                <div className="mb-4 w-full">{children}</div>
                 {menu.length ? (
                   <ul className="flex w-full flex-col">
                     {menu.map((item: Menu) => (
diff --git a/components/layout/navbar/index.tsx b/app/@navbar/page.tsx
similarity index 83%
rename from components/layout/navbar/index.tsx
rename to app/@navbar/page.tsx
index f7d2f6af9a..45e04bb018 100644
--- a/components/layout/navbar/index.tsx
+++ b/app/@navbar/page.tsx
@@ -6,17 +6,25 @@ import { Menu } from 'lib/shopify/types';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
-import Search, { SearchSkeleton } from './search';
+import Search from './search';
+
 const { SITE_NAME } = process.env;
 
-export default async function Navbar() {
+export default async function Navbar({
+  searchParams
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
   const menu = await getMenu('next-js-frontend-header-menu');
+  const search = searchParams.q ? (searchParams.q as string) : '';
 
   return (
     <nav className="relative flex items-center justify-between p-4 lg:px-6">
       <div className="block flex-none md:hidden">
         <Suspense fallback={null}>
-          <MobileMenu menu={menu} />
+          <MobileMenu menu={menu}>
+            <Search value={search} />
+          </MobileMenu>
         </Suspense>
       </div>
       <div className="flex w-full items-center">
@@ -43,9 +51,7 @@ export default async function Navbar() {
           ) : null}
         </div>
         <div className="hidden justify-center md:flex md:w-1/3">
-          <Suspense fallback={<SearchSkeleton />}>
-            <Search />
-          </Suspense>
+          <Search value={search} />
         </div>
         <div className="flex justify-end md:w-1/3">
           <Suspense fallback={<OpenCart />}>
diff --git a/app/@navbar/search.tsx b/app/@navbar/search.tsx
new file mode 100644
index 0000000000..8a8a33c8c5
--- /dev/null
+++ b/app/@navbar/search.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { useGlobalTransition } from 'lib/transition';
+import { useRouter } from 'next/navigation';
+
+export default function Search({ value }: { value: string }) {
+  const router = useRouter();
+  const { startTransition } = useGlobalTransition();
+
+  function searchAction(formData: FormData) {
+    const search = formData.get('search') as string;
+    startTransition(() => {
+      router.push(`/search?q=${search}`);
+    });
+  }
+
+  return (
+    <form action={searchAction} className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+      <input
+        key={value}
+        type="text"
+        name="search"
+        placeholder="Search for products..."
+        autoComplete="off"
+        defaultValue={value}
+        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>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 1e17f31d3b..93e81fd7c8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,5 @@
-import Navbar from 'components/layout/navbar';
 import { GeistSans } from 'geist/font/sans';
+import { GlobalTransitionProvider } from 'lib/transition';
 import { ensureStartsWith } from 'lib/utils';
 import { ReactNode } from 'react';
 import './globals.css';
@@ -31,13 +31,21 @@ export const metadata = {
     })
 };
 
-export default async function RootLayout({ children }: { children: ReactNode }) {
+export default async function RootLayout({
+  children,
+  navbar
+}: {
+  children: ReactNode;
+  navbar: ReactNode;
+}) {
   return (
     <html lang="en" className={GeistSans.variable}>
-      <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
-        <Navbar />
-        <main>{children}</main>
-      </body>
+      <GlobalTransitionProvider>
+        <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
+          {navbar}
+          <main>{children}</main>
+        </body>
+      </GlobalTransitionProvider>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 0fad0ac289..7d407ede83 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,7 +9,7 @@ export const metadata = {
   }
 };
 
-export default async function HomePage() {
+export default function HomePage() {
   return (
     <>
       <ThreeItemGrid />
diff --git a/app/search/loading.tsx b/app/search/loading.tsx
index 855c371bc2..7b75dd9224 100644
--- a/app/search/loading.tsx
+++ b/app/search/loading.tsx
@@ -7,7 +7,7 @@ export default function Loading() {
         .fill(0)
         .map((_, index) => {
           return (
-            <Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-900" />
+            <Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-800" />
           );
         })}
     </Grid>
diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx
deleted file mode 100644
index 551d781c2b..0000000000
--- a/components/layout/navbar/search.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client';
-
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { createUrl } from 'lib/utils';
-import { useRouter, useSearchParams } from 'next/navigation';
-
-export default function Search() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-
-    const val = e.target as HTMLFormElement;
-    const search = val.search as HTMLInputElement;
-    const newParams = new URLSearchParams(searchParams.toString());
-
-    if (search.value) {
-      newParams.set('q', search.value);
-    } else {
-      newParams.delete('q');
-    }
-
-    router.push(createUrl('/search', newParams));
-  }
-
-  return (
-    <form onSubmit={onSubmit} className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
-      <input
-        key={searchParams?.get('q')}
-        type="text"
-        name="search"
-        placeholder="Search for products..."
-        autoComplete="off"
-        defaultValue={searchParams?.get('q') || ''}
-        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>
-  );
-}
-
-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>
-  );
-}
diff --git a/components/layout/product-grid-items.tsx b/components/layout/product-grid-items.tsx
index ea8a5ebf75..22ed9a5a75 100644
--- a/components/layout/product-grid-items.tsx
+++ b/components/layout/product-grid-items.tsx
@@ -1,9 +1,35 @@
+'use client';
+
 import Grid from 'components/grid';
 import { GridTileImage } from 'components/grid/tile';
 import { Product } from 'lib/shopify/types';
+import { useGlobalTransition } from 'lib/transition';
 import Link from 'next/link';
 
+function Loading() {
+  return (
+    <>
+      {Array(12)
+        .fill(0)
+        .map((_, index) => {
+          return (
+            <Grid.Item
+              key={index}
+              className="h-full w-full animate-pulse bg-neutral-100 dark:bg-neutral-800"
+            />
+          );
+        })}
+    </>
+  );
+}
+
 export default function ProductGridItems({ products }: { products: Product[] }) {
+  const { isPending } = useGlobalTransition();
+
+  if (isPending) {
+    return <Loading />;
+  }
+
   return (
     <>
       {products.map((product) => (
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index 0b03557a55..34d90047e9 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -4,38 +4,37 @@ import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import { GridTileImage } from 'components/grid/tile';
 import { createUrl } from 'lib/utils';
 import Image from 'next/image';
-import Link from 'next/link';
-import { usePathname, useSearchParams } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useOptimistic } from 'react';
 
 export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
+  const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const imageSearchParam = searchParams.get('image');
   const imageIndex = imageSearchParam ? parseInt(imageSearchParam) : 0;
-
-  const nextSearchParams = new URLSearchParams(searchParams.toString());
-  const nextImageIndex = imageIndex + 1 < images.length ? imageIndex + 1 : 0;
-  nextSearchParams.set('image', nextImageIndex.toString());
-  const nextUrl = createUrl(pathname, nextSearchParams);
-
-  const previousSearchParams = new URLSearchParams(searchParams.toString());
-  const previousImageIndex = imageIndex === 0 ? images.length - 1 : imageIndex - 1;
-  previousSearchParams.set('image', previousImageIndex.toString());
-  const previousUrl = createUrl(pathname, previousSearchParams);
+  const [optimisticIndex, setOptimisticIndex] = useOptimistic(imageIndex);
 
   const buttonClassName =
     'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white flex items-center justify-center';
 
+  function updateIndex(newIndex: number) {
+    setOptimisticIndex(newIndex);
+    const newSearchParams = new URLSearchParams(searchParams.toString());
+    newSearchParams.set('image', newIndex.toString());
+    router.replace(createUrl(pathname, newSearchParams), { scroll: false });
+  }
+
   return (
     <>
       <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
-        {images[imageIndex] && (
+        {images[optimisticIndex] && (
           <Image
             className="h-full w-full object-contain"
             fill
             sizes="(min-width: 1024px) 66vw, 100vw"
-            alt={images[imageIndex]?.altText as string}
-            src={images[imageIndex]?.src as string}
+            alt={images[optimisticIndex]?.altText as string}
+            src={images[optimisticIndex]?.src as string}
             priority={true}
           />
         )}
@@ -43,23 +42,25 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
         {images.length > 1 ? (
           <div className="absolute bottom-[15%] flex w-full justify-center">
             <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
-              <Link
+              <button
                 aria-label="Previous product image"
-                href={previousUrl}
+                formAction={() => {
+                  updateIndex(optimisticIndex - 1);
+                }}
                 className={buttonClassName}
-                scroll={false}
               >
                 <ArrowLeftIcon className="h-5" />
-              </Link>
+              </button>
               <div className="mx-1 h-6 w-px bg-neutral-500"></div>
-              <Link
+              <button
                 aria-label="Next product image"
-                href={nextUrl}
+                formAction={() => {
+                  updateIndex(optimisticIndex + 1);
+                }}
                 className={buttonClassName}
-                scroll={false}
               >
                 <ArrowRightIcon className="h-5" />
-              </Link>
+              </button>
             </div>
           </div>
         ) : null}
@@ -68,18 +69,16 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
       {images.length > 1 ? (
         <ul className="my-12 flex items-center justify-center gap-2 overflow-auto py-1 lg:mb-0">
           {images.map((image, index) => {
-            const isActive = index === imageIndex;
-            const imageSearchParams = new URLSearchParams(searchParams.toString());
-
-            imageSearchParams.set('image', index.toString());
+            const isActive = index === optimisticIndex;
 
             return (
               <li key={image.src} className="h-20 w-20">
-                <Link
-                  aria-label="Enlarge product image"
-                  href={createUrl(pathname, imageSearchParams)}
-                  scroll={false}
+                <button
+                  aria-label="Select product image"
                   className="h-full w-full"
+                  formAction={() => {
+                    updateIndex(index);
+                  }}
                 >
                   <GridTileImage
                     alt={image.altText}
@@ -88,7 +87,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
                     height={80}
                     active={isActive}
                   />
-                </Link>
+                </button>
               </li>
             );
           })}
diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index 9d47eb5c8a..bb0376020e 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { ProductOption, ProductVariant } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useOptimistic, useTransition } from 'react';
 
 type Combination = {
   id: string;
@@ -21,6 +22,13 @@ export function VariantSelector({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const [optimisticVariants, setOptimsticVariants] = useOptimistic(variants);
+  const [optimisticOptions, setOptimisticOptions] = useOptimistic(
+    new URLSearchParams(searchParams.toString())
+  );
+  // eslint-disable-next-line no-unused-vars
+  const [pending, startTransition] = useTransition();
+
   const hasNoOptionsOrJustOneOption =
     !options.length || (options.length === 1 && options[0]?.values.length === 1);
 
@@ -28,7 +36,7 @@ export function VariantSelector({
     return null;
   }
 
-  const combinations: Combination[] = variants.map((variant) => ({
+  const combinations: Combination[] = optimisticVariants.map((variant) => ({
     id: variant.id,
     availableForSale: variant.availableForSale,
     // Adds key / value pairs for each variant (ie. "color": "Black" and "size": 'M").
@@ -45,14 +53,6 @@ export function VariantSelector({
         {option.values.map((value) => {
           const optionNameLowerCase = option.name.toLowerCase();
 
-          // Base option params on current params so we can preserve any other param state in the url.
-          const optionSearchParams = new URLSearchParams(searchParams.toString());
-
-          // Update the option params using the current option to reflect how the url *would* change,
-          // if the option was clicked.
-          optionSearchParams.set(optionNameLowerCase, value);
-          const optionUrl = createUrl(pathname, optionSearchParams);
-
           // In order to determine if an option is available for sale, we need to:
           //
           // 1. Filter out all other param state
@@ -62,7 +62,7 @@ export function VariantSelector({
           // This is the "magic" that will cross check possible variant combinations and preemptively
           // disable combinations that are not available. For example, if the color gray is only available in size medium,
           // then all other sizes should be disabled.
-          const filtered = Array.from(optionSearchParams.entries()).filter(([key, value]) =>
+          const filtered = Array.from(optimisticOptions.entries()).filter(([key, value]) =>
             options.find(
               (option) => option.name.toLowerCase() === key && option.values.includes(value)
             )
@@ -74,7 +74,7 @@ export function VariantSelector({
           );
 
           // The option is active if it's in the url params.
-          const isActive = searchParams.get(optionNameLowerCase) === value;
+          const isActive = optimisticOptions.get(optionNameLowerCase) === value;
 
           return (
             <button
@@ -82,7 +82,28 @@ export function VariantSelector({
               aria-disabled={!isAvailableForSale}
               disabled={!isAvailableForSale}
               onClick={() => {
-                router.replace(optionUrl, { scroll: false });
+                startTransition(() => {
+                  const newOptimisticVariants = optimisticVariants.map((variant) => {
+                    const updatedOptions = variant.selectedOptions.map((option) => {
+                      if (option.name.toLowerCase() === optionNameLowerCase) {
+                        return { ...option, value: value };
+                      }
+                      return option;
+                    });
+
+                    return { ...variant, selectedOptions: updatedOptions };
+                  });
+
+                  optimisticOptions.set(optionNameLowerCase, value);
+
+                  setOptimsticVariants(newOptimisticVariants);
+                  setOptimisticOptions(new URLSearchParams(optimisticOptions.toString()));
+
+                  const optionUrl = createUrl(pathname, optimisticOptions);
+
+                  // Navigate without page reload
+                  router.replace(optionUrl, { scroll: false });
+                });
               }}
               title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
               className={clsx(
diff --git a/lib/transition.tsx b/lib/transition.tsx
new file mode 100644
index 0000000000..2f2a704e52
--- /dev/null
+++ b/lib/transition.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { ReactNode, createContext, use, useTransition } from 'react';
+
+const GlobalTransitionContext = createContext<ReturnType<
+  typeof useGlobalTransitionInternal
+> | null>(null);
+
+export function useGlobalTransition() {
+  const transition = use(GlobalTransitionContext);
+
+  if (transition === null) {
+    throw new Error('Make sure to use `GlobalTransitionProvider` first.');
+  }
+
+  return transition;
+}
+
+function useGlobalTransitionInternal() {
+  const [isPending, startTransition] = useTransition();
+
+  return { isPending, startTransition };
+}
+
+export function GlobalTransitionProvider({ children }: { children: ReactNode }) {
+  const transition = useGlobalTransitionInternal();
+  return (
+    <GlobalTransitionContext.Provider value={transition}>
+      {children}
+    </GlobalTransitionContext.Provider>
+  );
+}