[v5] Icon component loading implementation does not account for preloaded icons

[adidahiya]

Environment

• Package version(s): core v5.0.0-alpha.3, icons v5.0.0-alpha.2
• Operating System: macOS
• Browser name and version: Chrome

Code Sandbox

https://codesandbox.io/p/sandbox/naughty-diffie-wy0ojy?file=%2Fsrc%2Fmain.tsx%3A36%2C4

Steps to reproduce

Found this while trying to upgrade the sandbox to v5.0.0-alpha in #6151

I attempted to implement icon loading in a non-webpack bundler environment:

// see https://vitejs.dev/guide/features.html#glob-import
const iconModules: Record<string, { default: IconComponent }> =
  import.meta.glob(
    "../node_modules/@blueprintjs/icons/lib/esm/generated/components/*.js",
    {
      eager: true,
    }
  );

console.warn(iconModules);

// specify a custom loader function for Vite
// see https://vitejs.dev/guide/features.html#dynamic-import
Icons.loadAll({
  loader: async (name) => {
    return iconModules[
      `../node_modules/@blueprintjs/icons/lib/esm/generated/components/${name}.js`
    ].default;
  },
});

Actual behavior

<Icon> component attempts to load every icon but does not know about the special loading options which were already used in Icons.loadAll. It then fails to load icons dynamically, even though they have already been loaded into the singleton:

Expected behavior

If icons are loaded already (like with the above snippet), <Icon> should not attempt to load them again (with a faulty loader).

It would also be nice if <Icon> accepted dynamic loading options via React context.

[adidahiya]

#6158 did help, but now there's a race condition. <Icon> components can get mounted on the page before icon loading completes, in which case they will again try to load icons with the default loader since autoLoad={true} by default.

Users can work around this by waiting for the Icons.loadAll() promise to fulfill:

// specify a custom loader function for Vite
// see https://vitejs.dev/guide/features.html#dynamic-import
await Icons.loadAll({
  loader: async (name) => {
    return iconModules[
      `../node_modules/@blueprintjs/icons/lib/esm/generated/components/${name}.js`
    ].default;
  },
});

// continue to render the app only after icons have loaded
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);