framework: illustrations to be fetched on demand

[ilhan007]

Feature Request Description

Currently all Illustrations which are part of the fiori package and used by the IllustratedMessage web component are bundled all together in the bundle.commons.js file. The Illustrations are both big in size and number and this leads to significant bundle size of the fiori bundle and the entire bundle.

Proposed Solution

To apply the same concept as with the icons. To register all illustrations, but then instead of importing and including all of them in the bundle, to create dynamic imports out of them, so that they will not included in the bundled, but loaded on demand. Also, the IllustratedMessage should be refactored to adopt this change, similar to the Icon when synchronously can't get its illustration asset it should try to load it async. For reference, see the Icon web component

let iconData = getIconDataSync(name);
if (!iconData) {
	iconData = await getIconData(name);
}

Additional info

There is already a registry for the illustrations - packages/base/src/asset-registries/Illustrations.js the same way we have for the Icons - packages/base/src/asset-registries/Icons.js. But unlike icons, the illustrations don't provide a loader (see packages/base/src/asset-registries/Icons.js and registerIconLoader method)

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: {...}
• Business impact: {...}