From 2568b11719ae20734c854acc6a5940e150e9e0f2 Mon Sep 17 00:00:00 2001
From: Yutaro Kijima <eddix.ibanez@outlook.jp>
Date: Tue, 12 Dec 2023 15:53:37 +0900
Subject: [PATCH] feat: loading

---
 src/app/auth/sign-in/SignInForm/index.tsx | 13 ++++++++-----
 src/app/auth/sign-in/page.tsx             |  1 +
 src/app/loading.tsx                       |  7 +++++++
 3 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 src/app/loading.tsx

diff --git a/src/app/auth/sign-in/SignInForm/index.tsx b/src/app/auth/sign-in/SignInForm/index.tsx
index 3531c5e..a542af2 100644
--- a/src/app/auth/sign-in/SignInForm/index.tsx
+++ b/src/app/auth/sign-in/SignInForm/index.tsx
@@ -1,15 +1,13 @@
 'use client';
 
 import { Field, Form, Label } from '@radix-ui/react-form';
-import { useFormState } from 'react-dom';
+import { useFormState, useFormStatus } from 'react-dom';
 
 import { signIn } from '../actions';
 import { ErrorMessage } from '@/lib/components/typographies';
 
-/**
- * @radix-ui/react-form が useContextを使っているのが憎い
- */
 export const SignInForm = () => {
+  const { pending } = useFormStatus();
   const [{ errors }, dispatch] = useFormState(signIn, { errors: {} });
   return (
     <Form role="form">
@@ -39,7 +37,12 @@ export const SignInForm = () => {
           type="password"
         />
       </Field>
-      <button formAction={dispatch} type="submit">
+      <button
+        formAction={dispatch}
+        type="submit"
+        aria-busy={pending}
+        aria-disabled={pending}
+      >
         signIn
       </button>
     </Form>
diff --git a/src/app/auth/sign-in/page.tsx b/src/app/auth/sign-in/page.tsx
index 1abfc3b..d2461b6 100755
--- a/src/app/auth/sign-in/page.tsx
+++ b/src/app/auth/sign-in/page.tsx
@@ -5,6 +5,7 @@ const SignInPage = () => {
     <main className="container">
       <h1>Sign In</h1>
       <SignInForm />
+      <a href="/auth/register">{`>`} register</a>
     </main>
   );
 };
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
new file mode 100644
index 0000000..ce1ec1c
--- /dev/null
+++ b/src/app/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <main className="center" aria-busy="true">
+      <h1>Loading</h1>
+    </main>
+  );
+}