@alexcjohnson

I'm just getting started on this project and have applied async loading to the AreaChart and BarChart. With just these two components updated, the dash_mantine_components.js file size has already been reduced from 2.68 MiB to 2.18 MiB 🎉.

I'm following the approach Emil used for async loading in dash-leaflet:

• Example of a component with async loading: EditControl.tsx
• This commit helped me set up async loading: Async Loading Commit

Before applying these changes to all the other files, I’d love to get your input on the following:

• Is it okay to place a fragments folder inside each component directory (charts, core, dates, extensions)? Any potential issues with this approach?
• There seems to be some redundancy in prop definitions between the component and the fragment. Is there a way to optimize this?
• Am I missing anything important, or is there anything unnecessary in the current setup?
• Any other comments?

Looking forward to your thoughts! 😊

Is it okay to place a fragments folder inside each component directory (charts, core, dates, extensions)? Any potential issues with this approach?

That should be fine.

There seems to be some redundancy in prop definitions between the component and the fragment. Is there a way to optimize this?

You can't directly import the fragment in the wrapper, but the reverse is OK: you should be able to import the interface from the wrapper, like we do with props in some older components

In the core folder, the largest files only

These are the Python files? Those don't say much about the size of the code they use, just about the props they support but that's heavily duplicated vs the JS code. I'd go one-by-one thinking about the complexity of what these components likely do in JS, and make fragments according to your judgment on that. So great call starting with charts, after which datepickers seem like a great next step but I don't yet have a great sense of what all is in Mantine to know if there are other candidates for high-code components.

@alexcjohnson

What do you think is the minimum size difference to make it worthwhile doing the async loading? I just tried the Carousel and CarouselSlide and I was surprised to see it didn't make that much difference. The dash_mantine_components.js went from 1.71 to 1.69 MiB

Next did the three code highlight components: CodeHighlight, CodeHighlightTabs InlineCodeHighlight - those made a big difference!

• dash_mantine_components.js (823 KiB)
• dash_mantine_components-shared.js (1.33MiB)

However, now that the dash_mantine_components-shared.js is so large, is there still the same benefit? If people don't use the charts or the code highlight components, will this shared file not have to be loaded?

@alexcjohnson

What do you think is the minimum size difference to make it worthwhile doing the async loading? I just tried the Carousel and CarouselSlide and I was surprised to see it didn't make that much difference. The dash_mantine_components.js went from 1.71 to 1.69 MiB

Next did the three code highlight components: CodeHighlight, CodeHighlightTabs InlineCodeHighlight - those made a big difference!

• dash_mantine_components.js (823 KiB)
• dash_mantine_components-shared.js (1.33MiB)

However, now that the dash_mantine_components-shared.js is so large, is there still the same benefit? If people don't use the charts or the code highlight components, will this shared file not have to be loaded?

I have made a PR trying to mitigate this issue.

Thanks @emilhe 🎉