IDOM "Wait For" CSS

[Archmonger]

Opening as a discussion first to check for feasibility. Should be pursued in V2 if feasible.

Ideally, I'd like to defer some CSS loading to be on-demand. This is especially important for Conreq, where there will be tons of user-generated CSS that won't be needed except with specific components. With the current options available to me within IDOM, the HTML often loads prior to the CSS, which causes visual jank.

Note: The rel=preload HTML attribute doesn't achieve the same goal here.

The only cross-framework implementation I could think of is: For developers using CSS URLs, create some kind of mechanism within IDOM that will attempt to fetch the CSS URL prior to rendering the component body.

# Note: `wait_for` and `wait_timeout` parameters added to `idom.html.link`

@component
def my_component():
    return div(
        link(
            {"rel": "stylesheet", "href": static("conreq/buttons.css")},
            # Will cause the renderer to wait until the resource is fetched. Could be accomplished via `onload` event attached to this `link` DOM element.
            wait_for=True,  
            # Timeout before continuing with the render, but letting the resource continue to be fetched in the background
            wait_timeout=1000,
        ),
        button("Something else")
    )

[rmorshea]

I'd like to avoid doing anything custom with HTML attributes. Rather it would probably be easier to add an option when configuring apps for a URL where IDOM should load CSS from:

@app.route("/static/styles.css")
async def styles():
    ...

configure(app, Component, Options(css_url="/static/styles.css")

Another option would be to implement some HTML templating to the client in order to inject arbitrary HTML into the header:

configure(
    app,
    Component, 
    Options(head_html="<title>My App</title><link ... />")
)

Or even better, head_html could also be IDOM HTML elements!

configure(
    app,
    Component, 
    Options(head_html=[html.title("My App"), html.link(...)])
)

[rmorshea]

Would need to implement this for that last one though.

[Archmonger]

Also, I want to clarify this is not about header CSS. This CSS <link/> would need to exist within any arbitrary component's HTML.
Also, a styles.css does not satisfy "component specific CSS" at all. It is not reasonable to compile all Conreq CSS into one bundle. That would cause far too many potential issues with third party apps. We absolutely need to load CSS on-demand within a component render.

---

Aren't the HTML attributes only contained within the leading dictionary {"rel": "stylesheet", ... }?
I'm envisioning the wait_for kwarg as something similar to our key= variable.

[rmorshea]

They are, but I'm hesitant to start adding non-standard attributes.

[rmorshea]

Oh, never mind. I see what you're talking about.

[Archmonger]

Yeah, hopefully we're on the same page now.

I can't think of a better way to implement this. The alternative is in the decorator but that's far more awkward.

[rmorshea]

I'm not really sure how we'd implement this. Typicaly solutions for conditionally loading CSS don't ever block so you can't just wait for the CSS to load before rendering the rest of the page.

[rmorshea]

Never mind, here's a solution. Maybe this could be a separate package now that we have the html.script element?

[Archmonger]

The situation I've described above is not exactly "conditional including" of CSS. I'm referring to dynamically adding/removing stylsheets from the DOM. But in this case, it's loaded/removed relative to a specific IDOM component.

Do you have a second to call about this? Easier to describe via share screen.

[rmorshea]

Sure. Can you email me an invite?