Improve UX in forms (Fix #1)

AntonioVdlC · Feb 17, 2022 · 35fc3dc · 35fc3dc
1 parent d63bf55
commit 35fc3dc
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 110 deletions.
diff --git a/app/assets/tail-spin.svg b/app/assets/tail-spin.svg
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
@@ -2,11 +2,14 @@ import { Link } from "remix";
 
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactChild } from "react";
 
+import spinIcon from "~/assets/tail-spin.svg";
+
 type Props = {
   children: ReactChild | ReactChild[];
   primary?: boolean;
   secondary?: boolean;
   external?: boolean;
+  loading?: boolean;
   to?: string;
 };
 
@@ -15,6 +18,7 @@ export default function Button({
   primary = false,
   secondary = false,
   external = false,
+  loading = false,
   to,
   ...props
 }: Props &
@@ -23,14 +27,14 @@ export default function Button({
   let color;
   if (primary) {
     color =
-      "bg-slate-600 text-white font-medium hover:bg-slate-700 focus:ring-slate-800";
+      "bg-slate-600 text-white font-medium hover:bg-slate-700 focus:ring-slate-800 disabled:opacity-50 disabled:cursor-progress disabled:hover:bg-slate-600";
   }
   if (secondary) {
     color =
-      "bg-slate-100 text-slate-800 font-medium hover:bg-slate-200 focus:ring-slate-300";
+      "bg-slate-100 text-slate-800 font-medium hover:bg-slate-200 focus:ring-slate-300 disabled:opacity-50 disabled:cursor-progress disabled:hover:bg-slate-100";
   }
 
-  const className = `block text-center whitespace-nowrap w-full py-3 px-4 rounded-md shadow focus:outline-none focus:ring-2 focus:ring-inset ${color}`;
+  const className = `relative block text-center whitespace-nowrap w-full py-3 px-4 rounded-md shadow focus:outline-none focus:ring-2 focus:ring-inset ${color}`;
 
   return to ? (
     external ? (
@@ -49,7 +53,12 @@ export default function Button({
       </Link>
     )
   ) : (
-    <button {...props} className={className}>
+    <button {...props} className={className} disabled={loading}>
+      {loading ? (
+        <span className="absolute left-4 motion-reduce:hidden">
+          <img className="h-6 w-6" src={spinIcon} />
+        </span>
+      ) : null}{" "}
       {children}
     </button>
   );

diff --git a/app/components/ErrorPage.tsx b/app/components/ErrorPage.tsx
@@ -1,6 +1,7 @@
 import { Link } from "remix";
 
 import Logo from "~/components/Logo";
+import classNames from "~/utils/class-names";
 
 type Props = {
   status: number;
@@ -23,9 +24,10 @@ export default function ErrorPage({
       <div className="flex min-h-full flex-col bg-slate-50 pt-16 pb-12">
         <main className="mx-auto flex w-full max-w-7xl flex-grow flex-col justify-center px-4 sm:px-6 lg:px-8">
           <div
-            className={`flex flex-shrink-0 justify-center ${
-              status === 404 ? "animate-pulse" : ""
-            }`}
+            className={classNames(
+              "flex flex-shrink-0 justify-center",
+              status === 404 ? "motion-safe:animate-pulse" : ""
+            )}
           >
             <Logo size="lg" withLink />
           </div>

diff --git a/app/components/Loading.tsx b/app/components/Loading.tsx
@@ -7,7 +7,7 @@ type Props = {
 export default function Loading({ text }: Props) {
   return (
     <>
-      <div className="animate-ping">
+      <div className="motion-safe:animate-ping">
         <Logo size="md" />
       </div>
       {text ? <p className="mt-12 text-slate-900">{text}</p> : null}

diff --git a/app/components/WebsiteCreateForm.tsx b/app/components/WebsiteCreateForm.tsx
@@ -1,10 +1,12 @@
-import { Form } from "remix";
+import { Form, useTransition } from "remix";
 
 import Button from "~/components/Button";
 import Input from "~/components/Input";
 import LayoutGrid from "~/components/LayoutGrid";
 
 export default function WebsiteCreateForm() {
+  const transition = useTransition();
+
   return (
     <Form
       method="post"
@@ -29,8 +31,8 @@ export default function WebsiteCreateForm() {
         />
       </LayoutGrid>
       <LayoutGrid>
-        <Button primary type="submit">
-          Add website
+        <Button primary type="submit" loading={Boolean(transition.submission)}>
+          {transition.submission ? "Creating ..." : "Add website"}
         </Button>
       </LayoutGrid>
     </Form>

diff --git a/app/routes/app/user.tsx b/app/routes/app/user.tsx
@@ -1,4 +1,4 @@
-import { Form, json, useLoaderData } from "remix";
+import { Form, json, useLoaderData, useTransition } from "remix";
 
 import type { ActionFunction, LoaderFunction } from "remix";
 import type { User } from "@prisma/client";
@@ -84,6 +84,7 @@ export const action: ActionFunction = async ({ request }) => {
 
 export default function AppUserRoute() {
   const data = useLoaderData<LoaderData>();
+  const transition = useTransition();
 
   return (
     <>
@@ -125,8 +126,12 @@ export default function AppUserRoute() {
         <div className="mt-3"></div>
 
         <LayoutGrid>
-          <Button type="submit" primary>
-            Update
+          <Button
+            type="submit"
+            primary
+            loading={Boolean(transition.submission)}
+          >
+            {transition.submission ? "Updating ..." : "Update"}
           </Button>
         </LayoutGrid>
       </Form>

diff --git a/app/routes/app/websites.details.$id.tsx b/app/routes/app/websites.details.$id.tsx
@@ -1,13 +1,14 @@
 import { useState } from "react";
-import { useLoaderData, Link, ActionFunction } from "remix";
+import { useLoaderData, Link, Form, useTransition } from "remix";
 import {
   ExternalLinkIcon,
   ClipboardCopyIcon,
   ClipboardCheckIcon,
 } from "@heroicons/react/outline";
+import { Role } from "@prisma/client";
 
-import type { LoaderFunction } from "remix";
-import { Org, Role, User, UserOrg, Website } from "@prisma/client";
+import type { LoaderFunction, ActionFunction } from "remix";
+import type { Org, User, UserOrg, Website } from "@prisma/client";
 
 import classNames from "~/utils/class-names";
 import { db } from "~/utils/db.server";
@@ -77,6 +78,8 @@ export default function WebsiteDetailsRoute() {
     });
   }
 
+  const transition = useTransition();
+
   return (
     <>
       <div>
@@ -174,7 +177,7 @@ export default function WebsiteDetailsRoute() {
 
       <H2>Website Settings</H2>
       <div className="mt-5">
-        <form method="post">
+        <Form method="post">
           <div className="relative flex items-start">
             <div className="flex h-5 items-center">
               <input
@@ -204,12 +207,16 @@ export default function WebsiteDetailsRoute() {
 
           <div className="mt-5">
             <LayoutGrid>
-              <Button type="submit" primary>
-                Update Settings
+              <Button
+                type="submit"
+                primary
+                loading={Boolean(transition.submission)}
+              >
+                {transition.submission ? "Updating ..." : "Update Settings"}
               </Button>
             </LayoutGrid>
           </div>
-        </form>
+        </Form>
       </div>
     </>
   );

diff --git a/app/routes/auth/login.tsx b/app/routes/auth/login.tsx
@@ -5,6 +5,7 @@ import {
   redirect,
   useActionData,
   useSearchParams,
+  useTransition,
 } from "remix";
 
 import type { ActionFunction, LoaderFunction } from "remix";
@@ -110,6 +111,8 @@ export const action: ActionFunction = async ({ request }) => {
 export default function Login() {
   const actionData = useActionData<ActionData>();
   const [searchParams] = useSearchParams();
+  const transition = useTransition();
+
   return (
     <div className="w-screen">
       <div className="bg-slate-50 pt-10 sm:pt-16 lg:overflow-hidden lg:pt-8 lg:pb-14">
@@ -179,7 +182,11 @@ export default function Login() {
                       </div>
                     </div>
 
-                    <Button primary type="submit">
+                    <Button
+                      primary
+                      type="submit"
+                      loading={Boolean(transition.submission)}
+                    >
                       Submit
                     </Button>
                   </Form>

diff --git a/app/routes/auth/logout.callback.tsx b/app/routes/auth/logout.callback.tsx
@@ -5,7 +5,7 @@ import Logo from "~/components/Logo";
 export default function LogoutCallbackRouter() {
   return (
     <>
-      <div className="flex animate-pulse justify-center">
+      <div className="flex justify-center motion-safe:animate-pulse">
         <Logo size="lg" withLink />
       </div>
 

diff --git a/app/routes/auth/waitlist.sent.tsx b/app/routes/auth/waitlist.sent.tsx
@@ -22,7 +22,7 @@ export default function LoginSentRoute() {
 
   return (
     <>
-      <div className="flex animate-bounce justify-center">
+      <div className="flex justify-center motion-safe:animate-bounce">
         <Logo size="lg" withLink />
       </div>
       <div className="mt-6 px-4 text-center md:w-1/2">

diff --git a/app/routes/auth/waitlist.tsx b/app/routes/auth/waitlist.tsx
@@ -1,4 +1,11 @@
-import { Form, useActionData, redirect, json, Link } from "remix";
+import {
+  Form,
+  useActionData,
+  redirect,
+  json,
+  Link,
+  useTransition,
+} from "remix";
 
 import type { ActionFunction, LoaderFunction } from "remix";
 
@@ -79,6 +86,7 @@ export const action: ActionFunction = async ({ request }) => {
 
 export default function RegisterRoute() {
   const actionData = useActionData<ActionData>();
+  const transition = useTransition();
 
   return (
     <div className="w-screen">
@@ -140,8 +148,14 @@ export default function RegisterRoute() {
                       </div>
                     </div>
 
-                    <Button primary type="submit">
-                      Join the waitlist
+                    <Button
+                      primary
+                      type="submit"
+                      loading={Boolean(transition.submission)}
+                    >
+                      {transition.submission
+                        ? "Joining ..."
+                        : "Join the waitlist"}
                     </Button>
                   </Form>