Add spinner

components/PrivatePage.tsx

@@ -1,6 +1,7 @@
 import { FC, useEffect } from "react";
 import { useRouter } from "next/router";
 import { useAuth } from "../context/UserContext";
+import Spinner from "./Spinner";
 
 const PrivatePage: FC<{ protectedRoutes: string[] }> = ({
   protectedRoutes,
@@ -19,9 +20,7 @@ const PrivatePage: FC<{ protectedRoutes: string[] }> = ({
 
   if (!isAuthenticated && pathIsProtected) {
     return (
-      <div className="form-alert-msg">
-        There was an error, please reload the page
-      </div>
+      <Spinner />
     );
   }
   return <>{children}</>;

components/Spinner.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react";
+type SpinnerProps = {
+  size?: number;
+};
+const Spinner: FC<SpinnerProps> = ({ size = 20 }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="animate-spin"
+    width={size}
+    height={size}
+  >
+    <circle
+      opacity=".25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    />
+    <path
+      opacity=".75"
+      fill="currentColor"
+      d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+);
+
+export default Spinner;

pages/login.tsx

@@ -4,20 +4,19 @@ import Layout from "../components/Layout";
 import { useAuth } from "../context/UserContext";
 import useForm from "../hooks/useForm";
 import { useRouter } from "next/router";
+import Spinner from "../components/Spinner";
 import api from "../utils/api";
 
 const Login: NextPage = () => {
   const { login } = useAuth();
   const router = useRouter();
 
-  const { error, submitHandler, success } = useForm(api.login);
+  const { error, submitHandler, success, loading } = useForm(api.login);
 
   useEffect(() => {
     if (success) {
       login(success.result);
-      setTimeout(() => {
-        router.push("/");
-      }, 1000);
+      router.push("/");
     }
   }, [success, login, router]);
 
@@ -51,19 +50,14 @@ const Login: NextPage = () => {
             required
           />
         </div>
-        <button type="submit" className="form-button">
-          Log in
+        <button type="submit" className="form-button" disabled={loading}>
+          {loading ? <Spinner /> : "Log in"}
         </button>
         {error && !success && (
           <div role="alert" className="form-alert-msg">
             {error.message}
           </div>
         )}
-        {success && (
-          <div role="alert" className="form-success-msg">{`${
-            success.message || "Logged in successfully!"
-          } Redirecting to home`}</div>
-        )}
       </form>
     </Layout>
   );

pages/settings.tsx

@@ -1,6 +1,7 @@
 import { NextPage } from "next/types";
 import { useEffect } from "react";
 import Layout from "../components/Layout";
+import Spinner from "../components/Spinner";
 import { useAuth } from "../context/UserContext";
 import useForm from "../hooks/useForm";
 import api from "../utils/api";
@@ -8,7 +9,7 @@ import api from "../utils/api";
 const Settings: NextPage = () => {
   const { updateUser, user } = useAuth();
 
-  const { error, submitHandler, success } = useForm(api.updateUser);
+  const { error, submitHandler, success, loading } = useForm(api.updateUser);
 
   useEffect(() => {
     if (success) {
@@ -76,8 +77,8 @@ const Settings: NextPage = () => {
           </select>
         </div>
         <input type="hidden" id="id" name="id" value={user.id} />
-        <button type="submit" className="form-button">
-          Save
+        <button type="submit" className="form-button" disabled={loading}>
+          {loading ? <Spinner /> : "Save"}
         </button>
         {error && !success && (
           <div role="alert" className="form-alert-msg">

pages/signup.tsx

@@ -1,10 +1,11 @@
 import { NextPage } from "next";
 import Layout from "../components/Layout";
+import Spinner from "../components/Spinner";
 import useForm from "../hooks/useForm";
 import api from "../utils/api";
 
 const SignUp: NextPage = () => {
-  const { submitHandler, error, success } = useForm(api.register);
+  const { submitHandler, error, success, loading } = useForm(api.register);
 
   return (
     <Layout>
@@ -36,8 +37,8 @@ const SignUp: NextPage = () => {
             required
           />
         </div>
-        <button type="submit" className="form-button">
-          Sign up
+        <button type="submit" className="form-button" disabled={loading}>
+          {loading ? <Spinner /> : "Sign up"}
         </button>
         {error && !success && (
           <div role="alert" className="form-alert-msg">