added icon dictionary to avoid downloading icons again

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/controls/iconControl.tsx

@@ -26,11 +26,12 @@ import {
   useIcon,
   wrapperToControlItem,
 } from "lowcoder-design";
-import { ReactNode, useCallback, useState } from "react";
+import { memo, ReactNode, useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 import { setFieldsNoTypeCheck } from "util/objectUtils";
 import { StringControl } from "./codeControl";
 import { ControlParams } from "./controlParams";
+import { IconDictionary } from "@lowcoder-ee/constants/iconConstants";
 
 const ButtonWrapper = styled.div`
   width: 100%;
@@ -208,14 +209,24 @@ type ChangeModeAction = {
   useCodeEditor: boolean;
 };
 
-export function IconControlView(props: { value: string }) {
+export const IconControlView = memo((props: { value: string }) => {
   const { value } = props;
   const icon = useIcon(value);
-  if (icon) {
-    return icon.getView();
-  }
-  return <StyledImage src={value} alt="" />;
-}
+
+  return useMemo(() => {
+    if (value && IconDictionary[value] && IconDictionary[value]?.title === icon?.title) {
+      return IconDictionary[value];
+    }
+
+    if (value && icon) {
+      const renderIcon = icon.getView();
+      IconDictionary[value] = renderIcon;
+      return renderIcon;
+    }
+
+    return <StyledImage src={value} alt="" />;
+  }, [icon, value, IconDictionary[value]])
+});
 
 export class IconControl extends AbstractComp<ReactNode, string, Node<ValueAndMsg<string>>> {
   private readonly useCodeEditor: boolean;

client/packages/lowcoder/src/constants/iconConstants.ts

@@ -0,0 +1,5 @@
+export let IconDictionary: Record<string, any> = {};
+
+export const resetIconDictionary  = () => {
+    IconDictionary = {};
+}

client/packages/lowcoder/src/pages/editor/AppEditor.tsx

@@ -36,6 +36,7 @@ import dayjs from "dayjs";
 import { currentApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
 import { notificationInstance } from "components/GlobalInstances";
 import { AppState } from "@lowcoder-ee/redux/reducers";
+import { resetIconDictionary } from "@lowcoder-ee/constants/iconConstants";
 
 const AppSnapshot = lazy(() => {
   return import("pages/editor/appSnapshot")
@@ -188,6 +189,7 @@ const AppEditor = React.memo(() => {
   useEffect(() => {
     if(!isLowcoderCompLoading) {
       fetchApplication();
+      resetIconDictionary();
     }
   }, [isLowcoderCompLoading, fetchApplication]);