Code Splitting Impact On Material-UI Theme Provider

[Peter Marshall]

Hi,

  I have an SPA which uses Material UI and am adding code splits to improve the perceived page load time.

The problem I'm seeing is that the late loaded split is not seeing the theme that encompasses the applications root element.

I load elements of the split (in the split itself) using code like the following.  

    (r/render

              [:<>

                ;Parts of the tool bar

                [layers-panel]

                [config-panel]

                [model-info-panel]]

              (-> js/document

                  (.getElementById tool-bar-drawers)))

The split itself is loaded but the theme is not applied.  If I insert hiccup into a specific node like this how can I get the theme applied?

Is there an alternative way of introducing the split elements into the tree?

Thanks.

 

[Peter Marshall]

Just to record the fix and the a bit more context.  My SPA has a home page and an edit page.  I don't need the edit parts when the home is first loaded so I moved them out to a split. (see https://sa.demo.softwarebynumbers.com/)

 

I added in the load of the custom theme for each render part of the split.  Without this, the material components load the default theme which then overrides the custom theme, and breaks the theme for the entire application.  So the above code in the split become more like this :

  (let [theme  @(rf/subscribe [::subs/theme])]

     ...  

    (r/render ;slide over panels

              [:> mui/MuiThemeProvider {:theme theme}

                [layers-panel]

                [config-panel]

                [model-info-panel]]

              (-> js/document

                  (.getElementById tool-bar-drawers)))

This now seems to work and preserves the them for the app.

Thanks.