= ({
const [successState, setSuccessState] = useState(false)
const [isLoading, setIsLoading] = useState(false)
- const [editFormState, editFormAction] = useFormState(updateCustomerAddress, {
- success: false,
- error: null,
- addressId: address?.id,
- })
+ const [editFormState, editFormAction] = useActionState(
+ updateCustomerAddress,
+ {
+ success: false,
+ error: null,
+ addressId: address?.id,
+ }
+ )
- const [addFormState, addFormAction] = useFormState(addCustomerAddress, {
+ const [addFormState, addFormAction] = useActionState(addCustomerAddress, {
success: false,
error: null,
})
@@ -92,9 +99,13 @@ const AddressModalForm: React.FC
= ({
setIsLoading(true)
if (isAddingNewAddress) {
- addFormAction(formData)
+ startTransition(() => {
+ addFormAction(formData)
+ })
} else {
- editFormAction(formData)
+ startTransition(() => {
+ editFormAction(formData)
+ })
}
}
diff --git a/src/modules/account/components/forgot-password/index.tsx b/src/modules/account/components/forgot-password/index.tsx
index 5286cbf..7efb4a8 100644
--- a/src/modules/account/components/forgot-password/index.tsx
+++ b/src/modules/account/components/forgot-password/index.tsx
@@ -1,6 +1,6 @@
'use client'
-import { useState } from 'react'
+import { useActionState, useState } from 'react'
import { emailRegex } from '@lib/constants'
import { forgotPassword } from '@lib/data/customer'
@@ -13,14 +13,13 @@ import { Heading } from '@modules/common/components/heading'
import { Input } from '@modules/common/components/input'
import { Text } from '@modules/common/components/text'
import { SearchResultsIcon } from '@modules/common/icons'
-import { useFormState } from 'react-dom'
type Props = {
setCurrentView: (view: LOGIN_VIEW) => void
}
const ForgotPassword = ({ setCurrentView }: Props) => {
- const [, formAction] = useFormState(forgotPassword, null)
+ const [, formAction] = useActionState(forgotPassword, null)
const [emailInputError, setEmailInputError] = useState(null)
const [email, setEmail] = useState(null)
diff --git a/src/modules/account/components/login/index.tsx b/src/modules/account/components/login/index.tsx
index 890db38..e4d7c4a 100644
--- a/src/modules/account/components/login/index.tsx
+++ b/src/modules/account/components/login/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { startTransition, useActionState, useEffect, useState } from 'react'
import { login } from '@lib/data/customer'
import { ValidationError } from '@lib/util/validator'
@@ -9,7 +9,6 @@ import { Button } from '@modules/common/components/button'
import { Heading } from '@modules/common/components/heading'
import { Input } from '@modules/common/components/input'
import { toast } from '@modules/common/components/toast'
-import { useFormState } from 'react-dom'
import RegisterPrompt from './register-prompt'
@@ -18,7 +17,7 @@ type Props = {
}
const Login = ({ setCurrentView }: Props) => {
- const [message, formAction] = useFormState(login, null)
+ const [message, formAction] = useActionState(login, null)
const [localMessage, setLocalMessage] = useState(null)
const [validationErrors, setValidationErrors] = useState(
[]
@@ -47,7 +46,9 @@ const Login = ({ setCurrentView }: Props) => {
}
setValidationErrors([])
- formAction(formData)
+ startTransition(() => {
+ formAction(formData)
+ })
}
// Clear message
diff --git a/src/modules/account/components/profile-edit-details/index.tsx b/src/modules/account/components/profile-edit-details/index.tsx
index c9ca73e..013bdad 100644
--- a/src/modules/account/components/profile-edit-details/index.tsx
+++ b/src/modules/account/components/profile-edit-details/index.tsx
@@ -1,6 +1,6 @@
'use client'
-import { useEffect, useState } from 'react'
+import { useActionState, useEffect, useState } from 'react'
import { updateCustomer } from '@lib/data/customer'
import { HttpTypes } from '@medusajs/types'
@@ -21,7 +21,6 @@ import {
import { Input } from '@modules/common/components/input'
import { toast } from '@modules/common/components/toast'
import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
-import { useFormState } from 'react-dom'
const ProfileEditDetails = ({
open,
@@ -35,7 +34,7 @@ const ProfileEditDetails = ({
customer: HttpTypes.StoreCustomer
}) => {
const [isSuccess, setIsSuccess] = useState(false)
- const [formState, formAction] = useFormState(updateCustomer, {
+ const [formState, formAction] = useActionState(updateCustomer, {
success: false,
error: null,
})
diff --git a/src/modules/account/components/profile-password/index.tsx b/src/modules/account/components/profile-password/index.tsx
index fa0af8f..308c79f 100644
--- a/src/modules/account/components/profile-password/index.tsx
+++ b/src/modules/account/components/profile-password/index.tsx
@@ -1,10 +1,9 @@
'use client'
-import React, { useEffect } from 'react'
+import React, { useActionState, useEffect } from 'react'
import { HttpTypes } from '@medusajs/types'
import { Input } from '@modules/common/components/input'
-import { useFormState } from 'react-dom'
import AccountInfo from '../account-info'
@@ -16,7 +15,7 @@ const ProfileName: React.FC = ({ customer }) => {
const [successState, setSuccessState] = React.useState(false)
// TODO: Add support for password updates
- const [state, formAction] = useFormState((() => {}) as any, {
+ const [state, formAction] = useActionState((() => {}) as any, {
customer,
success: false,
error: null,
diff --git a/src/modules/account/components/register/index.tsx b/src/modules/account/components/register/index.tsx
index 519b4d3..8fa4776 100644
--- a/src/modules/account/components/register/index.tsx
+++ b/src/modules/account/components/register/index.tsx
@@ -1,6 +1,6 @@
'use client'
-import { useEffect, useState } from 'react'
+import { startTransition, useActionState, useEffect, useState } from 'react'
import { passwordRequirements } from '@lib/constants'
import { signup } from '@lib/data/customer'
@@ -17,7 +17,6 @@ import { Label } from '@modules/common/components/label'
import LocalizedClientLink from '@modules/common/components/localized-client-link'
import { toast } from '@modules/common/components/toast'
import { CheckCircleIcon, XCircleIcon } from '@modules/common/icons'
-import { useFormState } from 'react-dom'
import LoginPrompt from './login-prompt'
@@ -28,7 +27,7 @@ type Props = {
const Register = ({ setCurrentView }: Props) => {
const [isReadAgreements, setIsReadAgreements] = useState(false)
const [localMessage, setLocalMessage] = useState(null)
- const [message, formAction] = useFormState(signup, null)
+ const [message, formAction] = useActionState(signup, null)
const [validationErrors, setValidationErrors] = useState(
[]
)
@@ -76,14 +75,18 @@ const Register = ({ setCurrentView }: Props) => {
}
setValidationErrors([])
- formAction(formData)
+ startTransition(() => {
+ formAction(formData)
+ })
}
// Clear message
useEffect(() => {
if (message) {
setLocalMessage(message)
- formAction(new FormData())
+ startTransition(() => {
+ formAction(new FormData())
+ })
}
}, [message, formAction])
diff --git a/src/modules/cart/templates/preview.tsx b/src/modules/cart/templates/preview.tsx
index 921e2d4..fd0b3be 100644
--- a/src/modules/cart/templates/preview.tsx
+++ b/src/modules/cart/templates/preview.tsx
@@ -2,7 +2,7 @@
import repeat from '@lib/util/repeat'
import { HttpTypes } from '@medusajs/types'
-import { clx, Table } from '@medusajs/ui'
+import { clx } from '@medusajs/ui'
import Item from '@modules/cart/components/item'
import { Box } from '@modules/common/components/box'
import SkeletonLineItem from '@modules/skeletons/components/skeleton-line-item'
@@ -21,24 +21,22 @@ const ItemsPreviewTemplate = ({ items }: ItemsTemplateProps) => {
hasOverflow,
})}
>
-
-
- {items
- ? items
- .sort((a, b) => {
- return (a.created_at ?? '') > (b.created_at ?? '') ? -1 : 1
- })
- .map((item) => {
- return
+
+ {items
+ ? items
+ .sort((a, b) => {
+ return (a.created_at ?? '') > (b.created_at ?? '') ? -1 : 1
+ })
+ .map((item) => {
+ return
-