diff --git a/src/components/Login/EmailLoginForm.tsx b/src/components/Login/EmailLoginForm.tsx
index 47c49ad62..287a99270 100644
--- a/src/components/Login/EmailLoginForm.tsx
+++ b/src/components/Login/EmailLoginForm.tsx
@@ -2,6 +2,7 @@ import Cookies from 'js-cookie';
 import type { FunctionComponent } from 'preact';
 import { useState } from 'preact/hooks';
 import { TOKEN_COOKIE_NAME } from '../../lib/constants';
+import Spinner from '../Spinner';
 
 const EmailLoginForm: FunctionComponent<{}> = () => {
   const [email, setEmail] = useState<string>('');
@@ -45,6 +46,11 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
         password,
       }),
     });
+
+    // TODO: Remove this on production
+    // Simulate slow network - 2 seconds
+    // await new Promise((resolve) => setTimeout(resolve, 2000));
+
     const json = await res.json();
 
     // If the response isn't ok, we'll throw an error
@@ -195,7 +201,7 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
         type="submit"
         className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-lg border border-slate-300 bg-black p-2 text-sm font-medium text-white outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:opacity-60"
       >
-        Continue
+        {isLoading ? <Spinner className="text-white" /> : 'Continue'}
       </button>
     </form>
   );
diff --git a/src/components/Login/EmailSignupForm.tsx b/src/components/Login/EmailSignupForm.tsx
index c0caa051e..560b8184e 100644
--- a/src/components/Login/EmailSignupForm.tsx
+++ b/src/components/Login/EmailSignupForm.tsx
@@ -2,6 +2,7 @@ import Cookies from 'js-cookie';
 import type { FunctionComponent } from 'preact';
 import { useState } from 'preact/hooks';
 import { TOKEN_COOKIE_NAME } from '../../lib/constants';
+import Spinner from '../Spinner';
 
 const EmailSignupForm: FunctionComponent<{}> = () => {
   const [email, setEmail] = useState<string>('');
@@ -125,7 +126,7 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
         }
         className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-lg border border-slate-300 bg-black p-2 text-sm font-medium text-white outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:opacity-60"
       >
-        Continue
+        {isLoading ? <Spinner className="text-white" /> : 'Continue'}
       </button>
     </form>
   );
diff --git a/src/components/Profile/ForgotPasswordForm.tsx b/src/components/Profile/ForgotPasswordForm.tsx
index 58f4c8154..e6b0aca08 100644
--- a/src/components/Profile/ForgotPasswordForm.tsx
+++ b/src/components/Profile/ForgotPasswordForm.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'preact/hooks';
+import Spinner from '../Spinner';
 
 export default function ForgotPasswordForm() {
   const [email, setEmail] = useState('');
@@ -105,29 +106,7 @@ export default function ForgotPasswordForm() {
         disabled={isLoading}
         className="mt-2 inline-flex h-10 w-full items-center justify-center rounded-lg border border-slate-300 bg-black p-2 px-4 text-sm font-medium text-white outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
       >
-        {isLoading ? (
-          <svg
-            className={`h-5 w-5 animate-spin text-white`}
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              className="stroke-[4px] opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-            ></circle>
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            ></path>
-          </svg>
-        ) : (
-          'Continue'
-        )}
+        {isLoading ? <Spinner className="text-white" /> : 'Continue'}
       </button>
     </form>
   );
diff --git a/src/components/Profile/ResetPasswordForm.tsx b/src/components/Profile/ResetPasswordForm.tsx
index b6245e89c..6cc67db30 100644
--- a/src/components/Profile/ResetPasswordForm.tsx
+++ b/src/components/Profile/ResetPasswordForm.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'preact/hooks';
+import Spinner from '../Spinner';
 
 export default function ResetPasswordForm() {
   const [password, setPassword] = useState('');
@@ -127,29 +128,7 @@ export default function ResetPasswordForm() {
         type="submit"
         className="mt-5 inline-flex h-10 w-full items-center justify-center rounded-lg border border-slate-300 bg-black p-2 px-4 text-sm font-medium text-white outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
       >
-        {isLoading ? (
-          <svg
-            className={`h-5 w-5 animate-spin text-white`}
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              className="stroke-[4px] opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-            ></circle>
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            ></path>
-          </svg>
-        ) : (
-          'Reset my password'
-        )}
+        {isLoading ? <Spinner className="text-white" /> : 'Reset my password'}
       </button>
     </form>
   );
diff --git a/src/components/Setting/ChangePasswordForm.tsx b/src/components/Setting/ChangePasswordForm.tsx
index d83e6694c..bf1f5d019 100644
--- a/src/components/Setting/ChangePasswordForm.tsx
+++ b/src/components/Setting/ChangePasswordForm.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME } from '../../lib/constants';
+import Spinner from '../Spinner';
 
 export default function ChangePasswordForm() {
   const [authProvider, setAuthProvider] = useState<
@@ -210,29 +211,7 @@ export default function ChangePasswordForm() {
           type="submit"
           disabled={isLoading}
         >
-          {isLoading ? (
-            <svg
-              class={`h-5 w-5 animate-spin text-white`}
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                class="stroke-[4px] opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-              ></circle>
-              <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              ></path>
-            </svg>
-          ) : (
-            'Change'
-          )}
+          {isLoading ? <Spinner className="text-white" /> : 'Change'}
         </button>
       </div>
     </form>
diff --git a/src/components/Setting/UpdateProfileForm.tsx b/src/components/Setting/UpdateProfileForm.tsx
index ef5115e87..dc05f0971 100644
--- a/src/components/Setting/UpdateProfileForm.tsx
+++ b/src/components/Setting/UpdateProfileForm.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import { TOKEN_COOKIE_NAME } from '../../lib/constants';
 import Cookies from 'js-cookie';
+import Spinner from '../Spinner';
 
 export default function UpdateProfileForm() {
   const [name, setName] = useState('');
@@ -232,29 +233,7 @@ export default function UpdateProfileForm() {
           type="submit"
           disabled={isLoading}
         >
-          {isLoading ? (
-            <svg
-              class={`h-5 w-5 animate-spin text-white`}
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                class="stroke-[4px] opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-              ></circle>
-              <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              ></path>
-            </svg>
-          ) : (
-            'Update'
-          )}
+          {isLoading ? <Spinner className="text-white" /> : 'Update'}
         </button>
       </div>
     </form>
diff --git a/src/components/Spinner.astro b/src/components/Spinner.astro
index b7d82e764..3e35e962b 100644
--- a/src/components/Spinner.astro
+++ b/src/components/Spinner.astro
@@ -4,22 +4,26 @@ const { ...props } = Astro.props;
 export type Props = astroHTML.JSX.HTMLAttributes & {};
 ---
 
-<svg
-  xmlns='http://www.w3.org/2000/svg'
-  fill='none'
-  viewBox='0 0 24 24'
-  class:list={[`animate-spin h-5 w-5`, props.class]}
-  {...props}
->
-  <circle
-    class='stroke-[4px] opacity-25'
-    cx='12'
-    cy='12'
-    r='10'
-    stroke='currentColor'></circle>
-  <path
-    class='opacity-75'
-    fill='currentColor'
-    d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
-  ></path>
-</svg>
+<div role='status'>
+  <svg
+    aria-hidden='true'
+    xmlns='http://www.w3.org/2000/svg'
+    fill='none'
+    viewBox='0 0 24 24'
+    class:list={[`animate-spin h-5 w-5`, props.class]}
+    {...props}
+  >
+    <circle
+      class='stroke-[4px] opacity-25'
+      cx='12'
+      cy='12'
+      r='10'
+      stroke='currentColor'></circle>
+    <path
+      class='opacity-75'
+      fill='currentColor'
+      d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
+    ></path>
+  </svg>
+  <span class='sr-only'>Loading</span>
+</div>
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
new file mode 100644
index 000000000..e3117ba1c
--- /dev/null
+++ b/src/components/Spinner.tsx
@@ -0,0 +1,26 @@
+export default function Spinner({ className }: { className?: string }) {
+  return (
+    <div role="status">
+      <svg
+        className={`h-5 w-5 animate-spin ${className}`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="stroke-[4px] opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+      <span class="sr-only">Loading</span>
+    </div>
+  );
+}