@@ -376,7 +376,7 @@ export default function NewProject() {
- {transition.state === "submitting"
+ {navigation.state === "submitting"
? "Creating..."
: "Create"}
@@ -389,7 +389,7 @@ export default function NewProject() {
Pretty slick! Now when the user clicks "Create", the inputs go disabled, and the submit button's text changes. The whole operation should be faster now too since there's just one network request happening instead of a full page reload (which involves potentially more network requests, reading assets from the browser cache, parsing JavaScript, parsing CSS, etc.).
-We didn't do much with `transition` on this page, but it's got all the information about the submission on `transition.submission`, including all of the values being processed on the server on `submission.formData`.
+We didn't do much with `navigation` on this page, but it's got all the information about the submission, including all of the values being processed on the server in `navigation.formData`.
### Animating in the Validation Errors
@@ -426,13 +426,13 @@ Now we can wrap our old error messages in this new fancy component, and even tur
```tsx lines=[21-24,31-34,44-48,53-56]
export default function NewProject() {
- const transition = useTransition();
+ const navigation = useNavigation();
const actionData = useActionData();
return (
- {transition.state === "submitting" ? (
+ {navigation.state === "submitting" ? (
Saving...
) : null}