CODEWITHSUNDEEP
reactjsnext.jsdialogreact-suspense
Shyamali
Shyamali

Reputation: 349

Dialog box is not opening until the suspense call completes on a conditional rendering

I have an implementation where a Dialog is been load conditionally based on a button click. On button OnClick where button is in a different component I'm changing the Dialog status(manage by zustand) to "user" where Dialog having below structure.

<FormProvider {... userForm}>
  <Dialog open={status === "user"} onOpenChange={onOpenChange}>
    <DialogContent className="max-h-[95vh] overflow-hidden sm:max-w-[52rem] sm:overflow-y-auto lg:max-w-screen-md">
      <DialogHeader>
        <DialogTitle>User Details</DialogTitle>
      </DialogHeader>
      {/* set of codes */}
      <Suspense fallback={<UserDetailsLoading />}>
        <UserDetails
          token={token}
          formId={formId}
          userId={userId ?? ""}
        />
      </Suspense>{" "}
      {/* set of codes */}
    </DialogContent>
  </Dialog>
</FormProvider>

where userForm is having a suspense call to get data and set data to the form.

Issue: the dialog does not open until the suspense call completed. I have tried adding a suspense boundary above the Dialog as to load a fallback dialog and it's also not working. I check the status is getting set correctly soon after button click and suspense call was holding dialog opening. Am I missing something or doing something wrong

Upvotes: 0

Views: 16

Answers (0)

Related Questions