[core] fix(Icon): use loaded paths in initial state if available (#6273)

adidahiya · web-flow · commit 774b902cae73 · 2023-07-12T15:06:54.000-04:00
diff --git a/packages/core/src/components/icon/icon.tsx b/packages/core/src/components/icon/icon.tsx
@@ -69,26 +69,16 @@ export interface IconProps extends IntentProps, Props, SVGIconProps, IconHTMLAtt
  * @see https://blueprintjs.com/docs/#core/components/icon
  */
 export const Icon: React.FC<IconProps> = React.forwardRef<any, IconProps>((props, ref) => {
-    const { icon } = props;
-
-    const {
-        autoLoad,
-        className,
-        color,
-        icon: _icon,
-        intent,
-        tagName,
-        svgProps,
-        title,
-        htmlTitle,
-        ...htmlProps
-    } = props;
-    const [iconPaths, setIconPaths] = React.useState<IconPaths>();
+    const { autoLoad, className, color, icon, intent, tagName, svgProps, title, htmlTitle, ...htmlProps } = props;
 
     // Preserve Blueprint v4.x behavior: iconSize prop takes predecence, then size prop, then fall back to default value
     // eslint-disable-next-line deprecation/deprecation
     const size = props.iconSize ?? props.size ?? IconSize.STANDARD;
 
+    const [iconPaths, setIconPaths] = React.useState<IconPaths | undefined>(() =>
+        typeof icon === "string" ? Icons.getPaths(icon, size) : undefined,
+    );
+
     React.useEffect(() => {
         let shouldCancelIconLoading = false;
         if (typeof icon === "string") {
diff --git a/packages/core/test/icon/iconTests.tsx b/packages/core/test/icon/iconTests.tsx
@@ -102,7 +102,6 @@ describe("<Icon>", () => {
 
     it("title sets content of <title> element", async () => {
         const wrapper = mount(<Icon icon="airplane" title="bird" />);
-        await waitUntilSpyCalledOnce(iconLoader);
         wrapper.update();
         assert.equal(wrapper.find("title").text(), "bird");
     });
@@ -128,7 +127,6 @@ describe("<Icon>", () => {
     /** Asserts that rendered icon has width/height equal to size. */
     async function assertIconSize(icon: React.ReactElement<IconProps>, size: number) {
         const wrapper = mount(icon);
-        await waitUntilSpyCalledOnce(iconLoader);
         wrapper.update();
         const svg = wrapper.find("svg");
         assert.strictEqual(svg.prop("width"), size);
@@ -138,18 +136,8 @@ describe("<Icon>", () => {
     /** Asserts that rendered icon has color equal to color. */
     async function assertIconColor(icon: React.ReactElement<IconProps>, color?: string) {
         const wrapper = mount(icon);
-        await waitUntilSpyCalledOnce(iconLoader);
         wrapper.update();
         const svg = wrapper.find("svg");
         assert.deepEqual(svg.prop("fill"), color);
     }
 });
-
-async function waitUntilSpyCalledOnce(spy: Sinon.SinonSpy, timeout = 1000, interval = 50): Promise<void> {
-    await new Promise(resolve => setTimeout(resolve, interval));
-    if (spy.calledOnce) {
-        return;
-    } else {
-        return waitUntilSpyCalledOnce(spy, timeout - interval, interval);
-    }
-}
