Not to re-mount Dialog/Drawer content

[dannylin108]

Is it possible not to re-mount Dialog/Drawer content on every open/close?

In current implementation:

1. all components inside Dialog/Drawer lose their state after re-opening (e.g. if put classic solid's counter inside a drawer, it will get reset after re-opening).
2. if components inside are pretty complex, their re-mounting perceptibly defers appearing of Dialog/Drawer, that's damaging the UX.

[GiyoMoon]

Funny, this was the behavior corvu had for a few months before I decided to change it because it went against people's expectations.

Sadly, this is very tricky to implement in userland and I haven't found a clean way to do this yet. A simple solution whould be something like this, but this comes with issues:

import Dialog from '@corvu/dialog'
import { createMemo, type Accessor, type JSX } from 'solid-js'

function CachedDialogContent() {
  const cachedContent = createCached(() => <input />)

  return (
  <Dialog>
      <Dialog.Trigger>
        Open
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Content>
          {cachedContent()()}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog>
  )
}

const createCached = (fn: () => JSX.Element) => {
  let result: Accessor<JSX.Element>
  let called = false
  return () => {
    if (called) {
      return result
    } else {
      called = true
      return (result = createMemo(fn))
    }
  }
}

export default CachedDialogContent

It resolves the content once the dialog renders for the first time and keeps the html element cached and reuses them when opened again.
The problem here is that it also keeps the root it got created in and this breaks things like accessing contexts.

If I ever find a good solution for this I'd love to provide an optional wrapper component that enables memoizing detachable content like this. But all solutions I've tried up until now either don't fully work or felt weird. And I'm hesitant to add this to the Dialog itself as I'd like to avoid increasing the bundle size if it's not a necessary feature or one that benefits the majority of the users.

[GiyoMoon]

Okay follow up:
This issue catched me and I found a solution! 🥳
I released a small utility which allows users to easily persist their unmounting components: solid-persistent
I added an example in the dialog documentation on how to use it: https://corvu.dev/docs/primitives/dialog/#persistent-content

[dannylin108]

Thanks for your help! 🙏

While playing with corvu I found a kinda quick hack to work this around:

function CachedDialogContent() {
  const cachedContent = <ComplexComponent />

  return (
  <Dialog>
      <Dialog.Trigger>
        Open
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Content>
          {cachedContent}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog>
  )
}

When ComplexComponent doesn't require to be inside Dialog's Context, it works.. But maybe this solution has other drawbacks, please advise! 🙏

This way is preferrable for me because I put inside Dialog/Drawer some complex components with a bit of calculations required to get them rendered.. In this approach all these calculations are done even before the dialog opens for the first time, so once it's triggerred, opening animation can occur without any delay..

PS. I checked how it works in Dialog component of @ark-ui/solid, and it's done in the same way: dialog content is pre-rendered in advance and then just appears.

[GiyoMoon]

This only works for simple use cases. It would throw a hydration error when used in an SSR environment for example. I can look at expanding the utility to allow prerenders like that :) But could be tricky because of SSR quirks.

[dannylin108]

if put nested dialog inside createPersistent it fails after second re-openning:

vokoscreenNG-2024-07-15_19-06-43.mp4

Do you need a legit reproduction link? 🙂

[GiyoMoon]

Yeah this doesn't work well sadly. The dismissible context of the outer dialog gets re-created on every open because the Portal destroys the content on close, and the content component itself isn't being persisted here.
If you put the nested dialog inside createPersistent it'll never re-render with the new dismissible context. Preferably you'd need to restructure your jsx to exclude <Dialog> and <Dialog.Content> of your nested dialog from createPersistent so they get re-created properly on open. But depending on your layout this is very hard to accomplish, probably even impossible.
What also works is to persist the content component of the outer dialog on it's own like this:

const PersistentDialogExample: VoidComponent = () => {
  const persistedOuterContent = createPersistent(OuterContent)

  return (
    <Dialog>
      <Dialog.Trigger>
        Open Dialog
      </Dialog.Trigger>
      <Dialog.Portal>{persistedOuterContent()}</Dialog.Portal>
    </Dialog>
  )
}

const OuterContent = () => {
  const persistentInnerContent = createPersistent(InnerContent)
  return (
    <>
      <Dialog.Overlay />
      <Dialog.Content>
        {persistentInnerContent()}
      </Dialog.Content>
    </>
  )
}

const InnerContent = () => (
  <>
    <Dialog.Label>
      Persistent dialog content
    </Dialog.Label>
    <input  />
    <Dialog>
      <Dialog.Trigger>Open nested</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Content>
          <p>hi!</p>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog>
  </>
)

This example persists the content of the outer dialog. If you also want to persist the content of the inner dialog, you'd need to wrap that in another createPersistent.

Not beautiful but that's what we're working with. createPersistent is a bit hacky. It's difficult to accomplish this in Solid in a good way as of right now.

[dannylin108]

Ok, I made some restructure of JSX to work it around.
Thanks a lot for you help! 🙏