Loading state for auth (#104)

Author: tnmyk

src/modules/account/components/login/index.tsx

@@ -2,6 +2,7 @@ import { medusaClient } from "@lib/config"
 import { LOGIN_VIEW, useAccount } from "@lib/context/account-context"
 import Button from "@modules/common/components/button"
 import Input from "@modules/common/components/input"
+import Spinner from "@modules/common/icons/spinner"
 import { useRouter } from "next/router"
 import { useState } from "react"
 import { FieldValues, useForm } from "react-hook-form"
@@ -24,11 +25,11 @@ const Login = () => {
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isSubmitting },
   } = useForm<SignInCredentials>()
 
   const onSubmit = handleSubmit(async (credentials) => {
-    medusaClient.auth
+    await medusaClient.auth
       .authenticate(credentials)
       .then(() => {
         refetchCustomer()
@@ -39,6 +40,11 @@ const Login = () => {
 
   return (
     <div className="max-w-sm w-full flex flex-col items-center">
+      {isSubmitting && (
+        <div className="z-10 fixed inset-0 bg-white bg-opacity-50 flex items-center justify-center">
+          <Spinner size={24} />
+        </div>
+      )}
       <h1 className="text-large-semi uppercase mb-6">Welcome back</h1>
       <p className="text-center text-base-regular text-gray-700 mb-8">
         Sign in to access an enhanced shopping experience.

src/modules/account/components/register/index.tsx

@@ -2,6 +2,7 @@ import { medusaClient } from "@lib/config"
 import { LOGIN_VIEW, useAccount } from "@lib/context/account-context"
 import Button from "@modules/common/components/button"
 import Input from "@modules/common/components/input"
+import Spinner from "@modules/common/icons/spinner"
 import Link from "next/link"
 import { useRouter } from "next/router"
 import { useState } from "react"
@@ -28,11 +29,11 @@ const Register = () => {
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isSubmitting },
   } = useForm<RegisterCredentials>()
 
   const onSubmit = handleSubmit(async (credentials) => {
-    medusaClient.customers
+    await medusaClient.customers
       .create(credentials)
       .then(() => {
         refetchCustomer()
@@ -43,6 +44,11 @@ const Register = () => {
 
   return (
     <div className="max-w-sm flex flex-col items-center mt-12">
+      {isSubmitting && (
+        <div className="z-10 fixed inset-0 bg-white bg-opacity-50 flex items-center justify-center">
+          <Spinner size={24} />
+        </div>
+      )}
       <h1 className="text-large-semi uppercase mb-6">Become a Acme Member</h1>
       <p className="text-center text-base-regular text-gray-700 mb-4">
         Create your Acme Member profile, and get access to an enhanced shopping