Dialog
should allow wrapping content, header, and footer (for example in Suspense
or some context)
#4497
Labels
Dialog
should allow wrapping content, header, and footer (for example in Suspense
or some context)
#4497
Description
Currently the API for
Dialog
does not support an ergonomic way to wrap the full contents of the dialog (header, footer, and body) in a wrapper such as aSuspense
boundary, context provider, error boundary etc. These all seem like legitimate use cases!In particular it is a very common pattern to want to lazy-load the content (header, body, and footer) of a dialog along with providers (eg. relay environment, or other context) only when the dialog is opened. This would require providing a "connected content" (header, body, footer) as a lazy component, while providing a "dumb content" (header, body, footer) as fallback to a
Suspense
boundary.💬 Additional context in slack thread
Steps to reproduce
This is a simplified example of the very common pattern of wanting to lazy-load a dialog within a suspense boundary
However the above doesn't work: if one were to wrap the entire dialog in a suspense boundary, the animation on the
Backdrop
will play as suspense transitions between the fallback and real dialogs, causing jarring animation between fallback and loaded states.Desired solution
Separate the
Dialog.Window
from theDialog.Contents
— Split theDialog
component into two components with separate roles:Dialog.Window
: simply renders thePortal
,Backdrop
, andStyledDialog
. Receives therole, width, height, position
props.Dialog.Content
: renders the content (header, footer, body) and all the other props. Manages state, event handlers etc.This would provide an API that allows wrapping all content within the
Portal
,Backdrop
, andStyledDialog
(Dialog.Window
). ThisDialog.Window
can thus remain stable and open on the page while transitioning between states in a suspense boundary that wraps theDialog.Content
.This would allow us to do something like:
Version
v36.12.0
Browser
No response
The text was updated successfully, but these errors were encountered: