protip: add some UI feedback to the add to cart button

johnsonthedev · Jan 11, 2022 · 7079663 · 7079663
1 parent 457c75d
commit 7079663
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 5 deletions.
diff --git a/app/components/product-details.tsx b/app/components/product-details.tsx
@@ -1,6 +1,6 @@
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { MouseEventHandler } from "react";
-import { Form, useLocation, useSearchParams } from "remix";
+import { Form, useLocation, useSearchParams, useTransition } from "remix";
 import cn from "classnames";
 
 import type { FullProduct } from "~/models/ecommerce-provider.server";
@@ -12,7 +12,9 @@ export function ProductDetails({
   translations,
 }: {
   product: FullProduct;
-  translations: PickTranslations<"Add to cart" | "Sold out">;
+  translations: PickTranslations<
+    "Add to cart" | "Sold out" | "Added!" | "Adding"
+  >;
 }) {
   let location = useLocation();
   let [searchParams] = useSearchParams();
@@ -82,6 +84,11 @@ export function ProductDetails({
               </Form>
             ) : null}
             <Form replace method="post" className="mt-8">
+              <input
+                type="hidden"
+                name="_action"
+                value={translations["Add to cart"]}
+              />
               <input
                 key={location.pathname + location.search}
                 defaultValue={location.pathname + location.search}
@@ -97,12 +104,15 @@ export function ProductDetails({
               <button
                 data-testid="add-to-cart"
                 className={cn(
-                  "py-4 text-gray-900 block w-full text-center font-semibold uppercase",
+                  "py-4 text-gray-900 active:bg-gray-300 block w-full text-center font-semibold uppercase",
                   disabled ? "bg-gray-300" : "bg-gray-50"
                 )}
                 disabled={disabled}
               >
-                {translations["Add to cart"]}
+                <SubmissionSequenceText
+                  action={translations["Add to cart"]}
+                  strings={[translations["Add to cart"], "Adding...", "Added!"]}
+                />
               </button>
             </Form>
           </div>
@@ -112,6 +122,32 @@ export function ProductDetails({
   );
 }
 
+function SubmissionSequenceText({
+  strings,
+  action,
+}: {
+  strings: String[];
+  action: string;
+}) {
+  let transition = useTransition();
+  let [text, setText] = useState(strings[0]);
+
+  useEffect(() => {
+    if (transition.submission?.formData.get("_action") === action) {
+      if (transition.state === "submitting") {
+        setText(strings[1]);
+      } else if (transition.state === "loading") {
+        setText(strings[2]);
+      }
+    } else {
+      let id = setTimeout(() => setText(strings[0]), 1000);
+      return () => clearTimeout(id);
+    }
+  }, [transition]);
+
+  return <span>{text}</span>;
+}
+
 function ImageSlider({ images }: { images: string[] }) {
   let sliderListRef = useRef<HTMLUListElement>(null);
   let scrollToImage: MouseEventHandler<HTMLButtonElement> = (event) => {

diff --git a/app/translations.server.tsx b/app/translations.server.tsx
@@ -100,6 +100,14 @@ let translations = {
     en: "Add to cart",
     es: "Añadir al carrito",
   },
+  Adding: {
+    en: "Adding...",
+    es: "Agregando...",
+  },
+  "Added!": {
+    en: "Added!",
+    es: "¡Adicional!",
+  },
   "Sold out": {
     en: "Sold out",
     es: "No disponible",