[dialog] Do not load content until dialog is opened

[ruphin]

Hi,

I have a feature in my application that I want to show in a dialog (like a login feature). I don't want the feature to load (the DOM elements to be rendered) until the dialog is actually opened. I figured out this workaround to achieve what I want:

html`
  <lion-dialog
    @opened-changed=${(e) => {
      this._dialogOpen = e.target.opened;
      this.requestUpdate();
    }}
  >
    <lion-button slot="invoker">Show dialog</lion-button>
    <div slot="content">
      ${this._dialogOpen ?
        html`<dialog-content></dialog-content>` :
        nothing
      }
    </div>
  </lion-dialog>
`;

I think this type of behaviour is most likely what most users want (the dialog content is not loaded until dialog is opened), but the way to do this is not very clear. Maybe we can change the API somehow to make this easier.

Possibly something like this:

html`
  <lion-dialog .content=${() => html`<dialog-content></dialog-content>`}>
    <lion-button slot="invoker">Show dialog</lion-button>
  </lion-dialog>
`;

[daKmoR]

we actually had this sort of api before... 🙈 it's a different set of worms - ultimately doing it as we do now is easier to reason and to maintain... that's why we changed it.

For the "dynamic" loading what you probably could do is to load the actual definition of the custom element later...

html`
  <lion-dialog
    @opened-changed=${(e) => {
      import(new URL('./dialog-content.js', import.meta.url));
    }}
  >
    <lion-button slot="invoker">Show dialog</lion-button>
    <div slot="content">
        <dialog-content></dialog-content>
    </div>
  </lion-dialog>
`;

or what you did with the dynamic rendering... I think both are valid solutions... maybe we should add it to the docs?

[ruphin]

The thing with dynamic loading is that it doesn't "reset" the element when the dialog is closed. My <dialog-content> is an element that has state, and expects to be created with an initial state. If the dialog is closed and re-opened, I want the state to be reset, like it is a new instance.

Even when the content is not a custom element, it can be relevant. For example when opening a login form in a dialog, which is not an unusual pattern. You would want the input fields to be reset (or better yet removed completely) when the dialog is closed, for security reasons.

If we don't want render functions, maybe we can use TemplateElement?

html`
  <lion-dialog>
    <lion-button slot="invoker">Show dialog</lion-button>
    <template when-opened slot="content">
      <dialog-content></dialog-content>
    </template>
  </lion-dialog>
`;

[daKmoR]

templates can't do properties... and the dialog-content could still have children which you want to set properties to...

hmm the more I think about it the more I believe that your original code fits best...

if you add _dialogOpen as a property then you don't need the requestUpdate

html`
  <lion-dialog @opened-changed=${(e) => { this._dialogOpen = e.target.opened;  }}>
    <lion-button slot="invoker">Show dialog</lion-button>
    <div slot="content">
      ${this._dialogOpen ?
        html`<dialog-content></dialog-content>` :
        nothing
      }
    </div>
  </lion-dialog>
`;

but yeah I think that is probably all you can improve...

actually I think I think it's pretty good like that 👍

[ruphin]

Ok. Then we just need a documentation change that explains this workaround. I also think it's useful to put a warning to users that indicates that the dialog content is immediately rendered with display=none.

[tlouisse]

Maybe this directive can be a nice solution?
https://lit.dev/playground/#sample=examples/directive-template-content

When the user provides inert dom via <template>, we can:

• delay first render (for performance)
• as an opt-in DX enhancement only render on open/close so state is reset unless explictly kept (opt-in, so default would align with standard browser <dialog>)