Commit a6ac1d3

committed

Better loading state

1 parent d98f615 commit a6ac1d3Copy full SHA for a6ac1d3

File tree

+56

-12

lines changed

+56

-12

lines changed

Lines changed: 2 additions & 6 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`import Link from 'next/link';`
`2`	`2`	`import { Form } from 'app/form';`
`3`	`3`	`import { signIn } from 'app/auth';`
	`4`	`+import { SubmitButton } from 'app/submit-button';`
`4`	`5`
`5`	`6`	`export default function Login() {`
`6`	`7`	`return (`
`@@ -22,12 +23,7 @@ export default function Login() {`
`22`	`23`	`});`
`23`	`24`	`}}`
`24`	`25`	`>`
`25`		`- <button`
`26`		`- type="submit"`
`27`		`- className="flex h-10 w-full items-center justify-center rounded-md border text-sm transition-all focus:outline-none"`
`28`		`- >`
`29`		`- Sign In`
`30`		`- </button>`
	`26`	`+ <SubmitButton>Sign in</SubmitButton>`
`31`	`27`	`<p className="text-center text-sm text-gray-600">`
`32`	`28`	`{"Don't have an account? "}`
`33`	`29`	`<Link href="/register" className="font-semibold text-gray-800">`

Lines changed: 2 additions & 6 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import Link from 'next/link';`
`2`	`2`	`import { Form } from 'app/form';`
`3`	`3`	`import { redirect } from 'next/navigation';`
`4`	`4`	`import { createUser, getUser } from 'app/db';`
	`5`	`+import { SubmitButton } from 'app/submit-button';`
`5`	`6`
`6`	`7`	`export default function Login() {`
`7`	`8`	`async function register(formData: FormData) {`
`@@ -28,12 +29,7 @@ export default function Login() {`
`28`	`29`	`</p>`
`29`	`30`	`</div>`
`30`	`31`	`<Form action={register}>`
`31`		`- <button`
`32`		`- type="submit"`
`33`		`- className="flex h-10 w-full items-center justify-center rounded-md border text-sm transition-all focus:outline-none"`
`34`		`- >`
`35`		`- Sign Up`
`36`		`- </button>`
	`32`	`+ <SubmitButton>Sign Up</SubmitButton>`
`37`	`33`	`<p className="text-center text-sm text-gray-600">`
`38`	`34`	`{'Already have an account? '}`
`39`	`35`	`<Link href="/login" className="font-semibold text-gray-800">`

Lines changed: 42 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,42 @@`
	`1`	`+'use client';`
	`2`	`+`
	`3`	`+import { useFormStatus } from 'react-dom';`
	`4`	`+`
	`5`	`+export function SubmitButton({ children }: { children: React.ReactNode }) {`
	`6`	`+ const { pending } = useFormStatus();`
	`7`	`+`
	`8`	`+ return (`
	`9`	`+ <button`
	`10`	`+ type={pending ? 'button' : 'submit'}`
	`11`	`+ aria-disabled={pending}`
	`12`	`+ className="flex h-10 w-full items-center justify-center rounded-md border text-sm transition-all focus:outline-none"`
	`13`	`+ >`
	`14`	`+ {children}`
	`15`	`+ {pending && (`
	`16`	`+ <svg`
	`17`	`+ className="animate-spin ml-2 h-4 w-4 text-black"`
	`18`	`+ xmlns="http://www.w3.org/2000/svg"`
	`19`	`+ fill="none"`
	`20`	`+ viewBox="0 0 24 24"`
	`21`	`+ >`
	`22`	`+ <circle`
	`23`	`+ className="opacity-25"`
	`24`	`+ cx="12"`
	`25`	`+ cy="12"`
	`26`	`+ r="10"`
	`27`	`+ stroke="currentColor"`
	`28`	`+ strokeWidth="4"`
	`29`	`+ />`
	`30`	`+ <path`
	`31`	`+ className="opacity-75"`
	`32`	`+ fill="currentColor"`
	`33`	`+ d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"`
	`34`	`+ />`
	`35`	`+ </svg>`
	`36`	`+ )}`
	`37`	`+ <span aria-live="polite" className="sr-only" role="status">`
	`38`	`+ {pending ? 'Loading' : 'Submit form'}`
	`39`	`+ </span>`
	`40`	`+ </button>`
	`41`	`+ );`
	`42`	`+}`

Lines changed: 1 addition & 0 deletions

Lines changed: 9 additions & 0 deletions

Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Comments

(0)