chore: loading spinner accessibilities

2 years ago · 05c9bbec8b
parent 11d7618230
commit 05c9bbec8b
8 changed files with 66 additions and 113 deletions
--- 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>
  );
--- 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>
  );
--- 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>
  );
--- 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>
  );
--- 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>
--- 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>
--- 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>
--- a/src/components/Spinner.tsx
+++ 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>
+  );
+}