fix: remove quick flash with already rendered icons (#7828)

* Fix rapid update with already rendered components

* Added check to not re-render previously rendered icons

* Removed all loaded icons in favor of lazy loaded icons

* Fixed Share icon

* Updated Lucide

* Deleted Eager Icon Imports

* Added AWS Inverted to Lazy Icon Imports

* Added check if name contains a number to kebab case name

* fixed freeze path shortcut

* Added remaining icons to lazy icons mapping

* Removed unused icon mapping, added eager loading react icons, added replacing "icon" with "" on get lucide name

* removed unused import

* Update hook to not be used inside function call

* Updated package-lock

src/frontend/package-lock.json

@@ -52,7 +52,7 @@
         "framer-motion": "^11.2.10",
         "fuse.js": "^7.0.0",
         "lodash": "^4.17.21",
-        "lucide-react": "^0.469.0",
+        "lucide-react": "^0.503.0",
         "million": "^3.1.11",
         "moment": "^2.30.1",
         "moment-timezone": "^0.5.48",
@@ -9943,9 +9943,10 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.469.0",
+      "version": "0.503.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.503.0.tgz",
-      "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==",
+      "integrity": "sha512-HGGkdlPWQ0vTF8jJ5TdIqhQXZi6uh3LnNgfZ8MHiuxFfX3RZeA79r2MW2tHAZKlAVfoNE8esm3p+O6VkIvpj6w==",
+      "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }

src/frontend/package.json

@@ -47,7 +47,7 @@
     "framer-motion": "^11.2.10",
     "fuse.js": "^7.0.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.469.0",
+    "lucide-react": "^0.503.0",
     "million": "^3.1.11",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.48",

src/frontend/src/components/common/genericIconComponent/index.tsx

@@ -27,6 +27,7 @@ export const ForwardedIconComponent = memo(
 
       useEffect(() => {
         // Reset states when icon name changes
+        if (!TargetIcon) {
           setIconError(false);
           setTargetIcon(null);
 
@@ -39,14 +40,19 @@ export const ForwardedIconComponent = memo(
             getNodeIcon(name)
               .then((component) => {
                 setTargetIcon(component);
+                setShowFallback(false);
               })
               .catch((error) => {
                 console.error(`Error loading icon ${name}:`, error);
                 setIconError(true);
+                setShowFallback(false);
               });
+          } else {
+            setShowFallback(false);
           }
 
           return () => clearTimeout(timer);
+        }
       }, [name]);
 
       const style = {

src/frontend/src/icons/Share/Share.jsx

@@ -1,5 +1,5 @@
 const SvgShare = (props) => (
-  <svg width="1em" height="1em" {...props} xmlns="http://www.w3.org/2000/svg">
+  <svg viewBox="3 3 18 18" {...props} xmlns="http://www.w3.org/2000/svg">
     <path
       d="M11.995 19.5a7.232 7.232 0 0 0 2.898-.585 7.582 7.582 0 0 0 2.392-1.627 7.748 7.748 0 0 0 1.625-2.398c.393-.904.59-1.868.59-2.89a7.172 7.172 0 0 0-.59-2.89 7.708 7.708 0 0 0-4.026-4.024 7.231 7.231 0 0 0-2.898-.586 7.209 7.209 0 0 0-2.888.586c-.905.39-1.7.932-2.387 1.626A7.788 7.788 0 0 0 5.09 9.11 7.172 7.172 0 0 0 4.5 12c0 1.022.197 1.986.59 2.89a7.748 7.748 0 0 0 1.625 2.398 7.582 7.582 0 0 0 2.392 1.627c.904.39 1.867.585 2.888.585Zm-3.687-4.238a.423.423 0 0 1-.316-.149c-.093-.099-.14-.247-.14-.446 0-.966.14-1.812.419-2.537.279-.725.721-1.29 1.328-1.696.607-.406 1.406-.609 2.396-.609h.093V8.366c0-.142.051-.266.154-.372a.514.514 0 0 1 .385-.158c.105 0 .198.024.279.07.08.047.182.129.306.246l3.167 2.956c.068.068.118.14.149.214.03.074.046.148.046.223a.578.578 0 0 1-.046.223.668.668 0 0 1-.149.213l-3.167 2.984c-.21.198-.409.297-.594.297a.52.52 0 0 1-.53-.511v-1.487h-.093c-.736 0-1.354.115-1.853.344-.498.229-.93.675-1.295 1.338-.075.136-.16.223-.256.26a.78.78 0 0 1-.283.056Z"
       fill="currentColor"

src/frontend/src/icons/eagerIconImports.ts

@@ -1,230 +0,0 @@
-import { AgentQLIcon } from "@/icons/AgentQL";
-import { AIMLIcon } from "@/icons/AIML";
-import { AirbyteIcon } from "@/icons/Airbyte";
-import { AnthropicIcon } from "@/icons/Anthropic";
-import { ApifyIcon, ApifyWhiteIcon } from "@/icons/Apify";
-import { ArizeIcon } from "@/icons/Arize";
-import { ArXivIcon } from "@/icons/ArXiv";
-import { AssemblyAIIcon } from "@/icons/AssemblyAI";
-import { AstraDBIcon } from "@/icons/AstraDB";
-import { AthenaIcon } from "@/icons/athena/index";
-import { AWSIcon } from "@/icons/AWS";
-import { AWSInvertedIcon } from "@/icons/AWSInverted";
-import { AzureIcon } from "@/icons/Azure";
-import { BingIcon } from "@/icons/Bing";
-import { BotMessageSquareIcon } from "@/icons/BotMessageSquare";
-import { BWPythonIcon } from "@/icons/BW python";
-import { CassandraIcon } from "@/icons/Cassandra";
-import { ChromaIcon } from "@/icons/ChromaIcon";
-import { ClickhouseIcon } from "@/icons/Clickhouse";
-import { CloudflareIcon } from "@/icons/Cloudflare";
-import { CohereIcon } from "@/icons/Cohere";
-import { ComposioIcon } from "@/icons/Composio";
-import { ConfluenceIcon } from "@/icons/Confluence";
-import { CouchbaseIcon } from "@/icons/Couchbase";
-import { CrewAiIcon } from "@/icons/CrewAI";
-import { DeepSeekIcon } from "@/icons/DeepSeek";
-import { DropboxIcon } from "@/icons/Dropbox";
-import { DuckDuckGoIcon } from "@/icons/DuckDuckGo";
-import { ElasticsearchIcon } from "@/icons/ElasticsearchStore";
-import { EvernoteIcon } from "@/icons/Evernote";
-import { ExaIcon } from "@/icons/Exa";
-import { FBIcon } from "@/icons/FacebookMessenger";
-import { FirecrawlIcon } from "@/icons/Firecrawl";
-import { freezeAllIcon } from "@/icons/freezeAll";
-import { GitBookIcon } from "@/icons/GitBook";
-import { GitLoaderIcon } from "@/icons/GitLoader";
-import { GleanIcon } from "@/icons/Glean";
-import { GlobeOkIcon } from "@/icons/globe-ok";
-import { GmailIcon } from "@/icons/gmail";
-import { GoogleIcon } from "@/icons/Google";
-import { GooglecalendarIcon } from "@/icons/googlecalendar";
-import { GoogleDriveIcon } from "@/icons/GoogleDrive";
-import { GoogleGenerativeAIIcon } from "@/icons/GoogleGenerativeAI";
-import {
-  GradientInfinity,
-  GradientSave,
-  GradientUngroup,
-} from "@/icons/GradientSparkles";
-import { GridHorizontalIcon } from "@/icons/GridHorizontal";
-import { GroqIcon } from "@/icons/Groq";
-import { HackerNewsIcon } from "@/icons/hackerNews";
-import { HCDIcon } from "@/icons/HCD";
-import { HomeAssistantIcon } from "@/icons/HomeAssistant";
-import { HuggingFaceIcon } from "@/icons/HuggingFace";
-import { WatsonxAiIcon } from "@/icons/IBMWatsonx";
-import { IcosaIcon } from "@/icons/Icosa";
-import { IFixIcon } from "@/icons/IFixIt";
-import { JSIcon } from "@/icons/JSicon";
-import { LangChainIcon } from "@/icons/LangChain";
-import { LangwatchIcon } from "@/icons/Langwatch";
-import { LMStudioIcon } from "@/icons/LMStudio";
-import { MaritalkIcon } from "@/icons/Maritalk";
-import { Mem0 } from "@/icons/Mem0";
-import { MetaIcon } from "@/icons/Meta";
-import { MidjourneyIcon } from "@/icons/Midjorney";
-import { MilvusIcon } from "@/icons/Milvus";
-import { MistralIcon } from "@/icons/mistral";
-import { MongoDBIcon } from "@/icons/MongoDB";
-import { NeedleIcon } from "@/icons/Needle";
-import { NotDiamondIcon } from "@/icons/NotDiamond";
-import { NotionIcon } from "@/icons/Notion";
-import { NovitaIcon } from "@/icons/Novita";
-import { NvidiaIcon } from "@/icons/Nvidia";
-import { OlivyaIcon } from "@/icons/Olivya";
-import { OllamaIcon } from "@/icons/Ollama";
-import { OneDriveIcon } from "@/icons/OneDrive";
-import { OpenAiIcon } from "@/icons/OpenAi";
-import { OpenRouterIcon } from "@/icons/OpenRouter";
-import { OpenSearch } from "@/icons/OpenSearch";
-import { PerplexityIcon } from "@/icons/Perplexity";
-import { PineconeIcon } from "@/icons/Pinecone";
-import { PostgresIcon } from "@/icons/Postgres";
-import { PythonIcon } from "@/icons/Python";
-import { QDrantIcon } from "@/icons/QDrant";
-import { QianFanChatIcon } from "@/icons/QianFanChat";
-import { RedisIcon } from "@/icons/Redis";
-import { SambaNovaIcon } from "@/icons/SambaNova";
-import { ScrapeGraph } from "@/icons/ScrapeGraphAI";
-import { SearchAPIIcon } from "@/icons/SearchAPI";
-import { SearchHybridIcon } from "@/icons/SearchHybrid";
-import { SearchLexicalIcon } from "@/icons/SearchLexical";
-import { SearchVectorIcon } from "@/icons/SearchVector";
-import { SearxIcon } from "@/icons/Searx";
-import { SerperIcon } from "@/icons/Serper";
-import { SerpSearchIcon } from "@/icons/SerpSearch";
-import { ShareIcon } from "@/icons/Share";
-import { Share2Icon } from "@/icons/Share2";
-import { SlackIcon } from "@/icons/Slack";
-import { SpiderIcon } from "@/icons/Spider";
-import { Streamlit } from "@/icons/Streamlit";
-import { SupabaseIcon } from "@/icons/supabase";
-import { TavilyIcon } from "@/icons/Tavily";
-import { ThumbDownIconCustom, ThumbUpIconCustom } from "@/icons/thumbs";
-import { UnstructuredIcon } from "@/icons/Unstructured";
-import { UpstashSvgIcon } from "@/icons/Upstash";
-import { VectaraIcon } from "@/icons/VectaraIcon";
-import { VertexAIIcon } from "@/icons/VertexAI";
-import { WeaviateIcon } from "@/icons/Weaviate";
-import { WikipediaIcon } from "@/icons/Wikipedia";
-import { WolframIcon } from "@/icons/Wolfram";
-import { XAIIcon } from "@/icons/xAI";
-import { YouTubeSvgIcon as YouTubeIcon } from "@/icons/Youtube";
-import { ZepMemoryIcon } from "@/icons/ZepMemory";
-
-// Export the eagerly loaded icons map
-export const eagerIconsMapping = {
-  "AI/ML": AIMLIcon,
-  AgentQL: AgentQLIcon,
-  Airbyte: AirbyteIcon,
-  Anthropic: AnthropicIcon,
-  Apify: ApifyIcon,
-  ApifyWhite: ApifyWhiteIcon,
-  ArXiv: ArXivIcon,
-  Arize: ArizeIcon,
-  AssemblyAI: AssemblyAIIcon,
-  AstraDB: AstraDBIcon,
-  Athena: AthenaIcon,
-  AWS: AWSIcon,
-  AWSInverted: AWSInvertedIcon,
-  Azure: AzureIcon,
-  Bing: BingIcon,
-  BotMessageSquare: BotMessageSquareIcon,
-  BWPython: BWPythonIcon,
-  Cassandra: CassandraIcon,
-  Chroma: ChromaIcon,
-  Clickhouse: ClickhouseIcon,
-  Cloudflare: CloudflareIcon,
-  Cohere: CohereIcon,
-  Composio: ComposioIcon,
-  Confluence: ConfluenceIcon,
-  Couchbase: CouchbaseIcon,
-  CrewAI: CrewAiIcon,
-  DeepSeek: DeepSeekIcon,
-  Dropbox: DropboxIcon,
-  DuckDuckGo: DuckDuckGoIcon,
-  ElasticsearchStore: ElasticsearchIcon,
-  Evernote: EvernoteIcon,
-  Exa: ExaIcon,
-  FacebookMessenger: FBIcon,
-  Firecrawl: FirecrawlIcon,
-  FreezeAll: freezeAllIcon,
-  GitBook: GitBookIcon,
-  GitLoader: GitLoaderIcon,
-  Glean: GleanIcon,
-  GlobeOk: GlobeOkIcon,
-  Google: GoogleIcon,
-  GoogleDrive: GoogleDriveIcon,
-  GoogleGenerativeAI: GoogleGenerativeAIIcon,
-  Gmail: GmailIcon,
-  Googlecalendar: GooglecalendarIcon,
-  GradientInfinity: GradientInfinity,
-  GradientSave: GradientSave,
-  GradientUngroup: GradientUngroup,
-  GridHorizontal: GridHorizontalIcon,
-  Groq: GroqIcon,
-  HackerNews: HackerNewsIcon,
-  HCD: HCDIcon,
-  HomeAssistant: HomeAssistantIcon,
-  HuggingFace: HuggingFaceIcon,
-  Icosa: IcosaIcon,
-  IFixIt: IFixIcon,
-  javascript: JSIcon,
-  LangChain: LangChainIcon,
-  Langwatch: LangwatchIcon,
-  LMStudio: LMStudioIcon,
-  Maritalk: MaritalkIcon,
-  Mem0: Mem0,
-  Meta: MetaIcon,
-  Midjourney: MidjourneyIcon,
-  Milvus: MilvusIcon,
-  Mistral: MistralIcon,
-  MongoDB: MongoDBIcon,
-  Needle: NeedleIcon,
-  NotDiamond: NotDiamondIcon,
-  Notion: NotionIcon,
-  Novita: NovitaIcon,
-  NVIDIA: NvidiaIcon,
-  Olivya: OlivyaIcon,
-  Ollama: OllamaIcon,
-  OneDrive: OneDriveIcon,
-  OpenAI: OpenAiIcon,
-  OpenRouter: OpenRouterIcon,
-  OpenSearch: OpenSearch,
-  Perplexity: PerplexityIcon,
-  Pinecone: PineconeIcon,
-  Postgres: PostgresIcon,
-  Python: PythonIcon,
-  QDrant: QDrantIcon,
-  QianFanChat: QianFanChatIcon,
-  Redis: RedisIcon,
-  SambaNova: SambaNovaIcon,
-  ScrapeGraph: ScrapeGraph,
-  SearchAPI: SearchAPIIcon,
-  SearchLexical: SearchLexicalIcon,
-  SearchHybrid: SearchHybridIcon,
-  SearchVector: SearchVectorIcon,
-  Searx: SearxIcon,
-  SerpSearch: SerpSearchIcon,
-  Serper: SerperIcon,
-  Share: ShareIcon,
-  Share2: Share2Icon,
-  Slack: SlackIcon,
-  Spider: SpiderIcon,
-  Streamlit: Streamlit,
-  Supabase: SupabaseIcon,
-  Tavily: TavilyIcon,
-  ThumbDownCustom: ThumbDownIconCustom,
-  ThumbUpCustom: ThumbUpIconCustom,
-  Unstructured: UnstructuredIcon,
-  Upstash: UpstashSvgIcon,
-  Vectara: VectaraIcon,
-  VertexAI: VertexAIIcon,
-  WatsonxAI: WatsonxAiIcon,
-  Weaviate: WeaviateIcon,
-  Wikipedia: WikipediaIcon,
-  Wolfram: WolframIcon,
-  xAI: XAIIcon,
-  YouTube: YouTubeIcon,
-  ZepMemory: ZepMemoryIcon,
-};

src/frontend/src/icons/lazyIconImports.ts

@@ -25,9 +25,17 @@ export const lazyIconsMapping = {
   Athena: () =>
     import("@/icons/athena").then((mod) => ({ default: mod.AthenaIcon })),
   AWS: () => import("@/icons/AWS").then((mod) => ({ default: mod.AWSIcon })),
+  AWSInverted: () =>
+    import("@/icons/AWSInverted").then((mod) => ({
+      default: mod.AWSInvertedIcon,
+    })),
   Azure: () =>
     import("@/icons/Azure").then((mod) => ({ default: mod.AzureIcon })),
   Bing: () => import("@/icons/Bing").then((mod) => ({ default: mod.BingIcon })),
+  BotMessageSquareIcon: () =>
+    import("@/icons/BotMessageSquare").then((mod) => ({
+      default: mod.BotMessageSquareIcon,
+    })),
   BWPython: () =>
     import("@/icons/BW python").then((mod) => ({ default: mod.BWPythonIcon })),
   Cassandra: () =>
@@ -109,6 +117,10 @@ export const lazyIconsMapping = {
     import("@/icons/GradientSparkles").then((mod) => ({
       default: mod.GradientUngroup,
     })),
+  GradientSave: () =>
+    import("@/icons/GradientSparkles").then((mod) => ({
+      default: mod.GradientSave,
+    })),
   GridHorizontal: () =>
     import("@/icons/GridHorizontal").then((mod) => ({
       default: mod.GridHorizontalIcon,

src/frontend/src/icons/lucideIcons.ts

@@ -1,469 +0,0 @@
-import {
-  AlertCircle,
-  AlertTriangle,
-  ArrowBigUp,
-  ArrowLeft,
-  ArrowRight,
-  ArrowRightLeft,
-  ArrowUpRight,
-  ArrowUpToLine,
-  AudioLines,
-  Bell,
-  Binary,
-  Blocks,
-  BookMarked,
-  BookOpenText,
-  BookmarkPlus,
-  Bot,
-  BotMessageSquare,
-  Boxes,
-  Braces,
-  BrainCircuit,
-  ChartNetwork,
-  Check,
-  CheckCheck,
-  CheckCircle2,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronRightSquare,
-  ChevronUp,
-  ChevronsDownUp,
-  ChevronsLeft,
-  ChevronsRight,
-  ChevronsUpDown,
-  ChevronsUpDownIcon,
-  Circle,
-  CircleCheckBig,
-  CircleDot,
-  CircleOff,
-  Clipboard,
-  CloudDownload,
-  Code,
-  Code2,
-  CodeXml,
-  Cog,
-  Columns2,
-  Combine,
-  Command,
-  Compass,
-  Copy,
-  CopyPlus,
-  CornerDownLeft,
-  Cpu,
-  Database,
-  DatabaseZap,
-  Delete,
-  DollarSign,
-  Dot,
-  Download,
-  DownloadCloud,
-  Edit,
-  Ellipsis,
-  EllipsisVertical,
-  Eraser,
-  ExternalLink,
-  Eye,
-  EyeOff,
-  File,
-  FileChartColumn,
-  FileClock,
-  FileCode2,
-  FileDown,
-  FileJson,
-  FilePen,
-  FileQuestion,
-  FileSearch,
-  FileSearch2,
-  FileSliders,
-  FileText,
-  FileType,
-  FileType2,
-  FileUp,
-  Filter,
-  FlaskConical,
-  FolderIcon,
-  FolderPlus,
-  FolderPlusIcon,
-  FolderSync,
-  FolderUp,
-  FormInput,
-  Forward,
-  Gift,
-  GitBranchPlus,
-  GitFork,
-  GithubIcon,
-  Globe,
-  GripVertical,
-  Group,
-  Hammer,
-  Heart,
-  HelpCircle,
-  Home,
-  Image,
-  Infinity,
-  Info,
-  InstagramIcon,
-  Key,
-  Keyboard,
-  Laptop2,
-  Layers,
-  LayoutGrid,
-  LayoutPanelTop,
-  Link,
-  Link2,
-  List,
-  ListChecks,
-  ListFilter,
-  ListOrdered,
-  ListX,
-  Loader2,
-  Lock,
-  LockOpen,
-  LogIn,
-  LogOut,
-  LucideSend,
-  Maximize2,
-  Menu,
-  MessageCircle,
-  MessageSquare,
-  MessageSquareMore,
-  MessagesSquare,
-  Mic,
-  Mic2,
-  MicOff,
-  Minimize2,
-  Minus,
-  Monitor,
-  Moon,
-  MoonIcon,
-  MoreHorizontal,
-  Network,
-  Newspaper,
-  NotebookPen,
-  OctagonAlert,
-  OptionIcon,
-  Package2,
-  Palette,
-  PanelLeftClose,
-  PanelLeftOpen,
-  PanelRightClose,
-  PanelRightOpen,
-  Paperclip,
-  PaperclipIcon,
-  Pen,
-  Pencil,
-  PencilLine,
-  PencilRuler,
-  PieChart,
-  Pin,
-  Plane,
-  Play,
-  Plus,
-  PlusCircle,
-  PlusSquare,
-  PocketKnife,
-  Radio,
-  Redo,
-  RefreshCcw,
-  RefreshCcwDot,
-  Repeat,
-  Replace,
-  RotateCcw,
-  Save,
-  SaveAll,
-  Scan,
-  ScanEye,
-  Scissors,
-  ScreenShare,
-  Scroll,
-  ScrollText,
-  Search,
-  Settings,
-  Settings2,
-  Share,
-  Share2,
-  Shield,
-  Sigma,
-  Sliders,
-  SlidersHorizontal,
-  Snowflake,
-  Sparkles,
-  Square,
-  SquareArrowOutUpRight,
-  SquareCode,
-  SquarePen,
-  SquarePlay,
-  StickyNote,
-  Store,
-  Sun,
-  SunIcon,
-  Table,
-  Tags,
-  TerminalIcon,
-  TerminalSquare,
-  TextCursorInput,
-  TextSearch,
-  TextSearchIcon,
-  ThumbsDown,
-  ThumbsUp,
-  ToyBrick,
-  Trash2,
-  Type,
-  Undo,
-  Ungroup,
-  UnlinkIcon,
-  Unplug,
-  Upload,
-  User,
-  UserCog2,
-  UserMinus2,
-  UserPlus2,
-  Users,
-  Users2,
-  Variable,
-  Wand2,
-  Workflow,
-  Wrench,
-  X,
-  XCircle,
-  Zap,
-  ZoomIn,
-  ZoomOut,
-} from "lucide-react";
-import { TwitterXIcon } from "./Twitter X";
-
-// Create a map of eagerly loaded Lucide icons
-export const lucideIcons = {
-  AlertCircle,
-  AlertTriangle,
-  ArrowBigUp,
-  ArrowLeft,
-  ArrowRight,
-  ArrowRightLeft,
-  ArrowUpRight,
-  ArrowUpToLine,
-  AudioLines,
-  Bell,
-  Binary,
-  Blocks,
-  BookMarked,
-  BookOpenText,
-  BookmarkPlus,
-  Bot,
-  BotMessageSquare,
-  Boxes,
-  Braces,
-  BrainCircuit,
-  ChartNetwork,
-  Check,
-  CheckCheck,
-  CheckCircle2,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronRightSquare,
-  ChevronUp,
-  ChevronsDownUp,
-  ChevronsLeft,
-  ChevronsRight,
-  ChevronsUpDown,
-  ChevronsUpDownIcon,
-  Circle,
-  CircleCheckBig,
-  CircleDot,
-  CircleOff,
-  Clipboard,
-  CloudDownload,
-  Code,
-  Code2,
-  CodeXml,
-  Cog,
-  Columns2,
-  Combine,
-  Command,
-  Compass,
-  Copy,
-  CopyPlus,
-  CornerDownLeft,
-  Cpu,
-  Database,
-  DatabaseZap,
-  Delete,
-  DollarSign,
-  Dot,
-  Download,
-  DownloadCloud,
-  Edit,
-  Ellipsis,
-  EllipsisVertical,
-  Eraser,
-  ExternalLink,
-  Eye,
-  EyeOff,
-  File,
-  FileChartColumn,
-  FileClock,
-  FileCode2,
-  FileDown,
-  FileJson,
-  FilePen,
-  FileQuestion,
-  FileSearch,
-  FileSearch2,
-  FileSliders,
-  FileText,
-  FileType,
-  FileType2,
-  FileUp,
-  Filter,
-  FlaskConical,
-  FolderIcon,
-  FolderPlus,
-  FolderPlusIcon,
-  FolderSync,
-  FolderUp,
-  FormInput,
-  Forward,
-  Gift,
-  GitBranchPlus,
-  GitFork,
-  GithubIcon,
-  Globe,
-  GripVertical,
-  Group,
-  Hammer,
-  Heart,
-  HelpCircle,
-  Home,
-  Image,
-  Infinity,
-  Info,
-  Key,
-  Keyboard,
-  Laptop2,
-  Layers,
-  LayoutGrid,
-  LayoutPanelTop,
-  Link,
-  Link2,
-  List,
-  ListChecks,
-  ListFilter,
-  ListOrdered,
-  ListX,
-  Loader2,
-  Lock,
-  LockOpen,
-  LogIn,
-  LogOut,
-  LucideSend,
-  Maximize2,
-  Menu,
-  MessageCircle,
-  MessageSquare,
-  MessageSquareMore,
-  MessagesSquare,
-  Mic,
-  Mic2,
-  MicOff,
-  Minimize2,
-  Minus,
-  Monitor,
-  Moon,
-  MoonIcon,
-  MoreHorizontal,
-  Network,
-  Newspaper,
-  NotebookPen,
-  OctagonAlert,
-  OptionIcon,
-  Package2,
-  Palette,
-  PanelLeftClose,
-  PanelLeftOpen,
-  PanelRightClose,
-  PanelRightOpen,
-  Paperclip,
-  PaperclipIcon,
-  Pen,
-  Pencil,
-  PencilLine,
-  PencilRuler,
-  PieChart,
-  Pin,
-  Plane,
-  Play,
-  Plus,
-  PlusCircle,
-  PlusSquare,
-  PocketKnife,
-  Radio,
-  Redo,
-  RefreshCcw,
-  RefreshCcwDot,
-  Repeat,
-  Replace,
-  RotateCcw,
-  Save,
-  SaveAll,
-  Scan,
-  ScanEye,
-  Scissors,
-  ScreenShare,
-  Scroll,
-  ScrollText,
-  Search,
-  Settings,
-  Settings2,
-  Share,
-  Share2,
-  Shield,
-  Sigma,
-  Sliders,
-  SlidersHorizontal,
-  Snowflake,
-  Sparkles,
-  Square,
-  SquareArrowOutUpRight,
-  SquareCode,
-  SquarePen,
-  SquarePlay,
-  StickyNote,
-  Store,
-  Sun,
-  SunIcon,
-  Table,
-  Tags,
-  TerminalIcon,
-  TerminalSquare,
-  TextCursorInput,
-  TextSearch,
-  TextSearchIcon,
-  ThumbsDown,
-  ThumbsUp,
-  ToyBrick,
-  Trash2,
-  Type,
-  Undo,
-  Ungroup,
-  UnlinkIcon,
-  Unplug,
-  Upload,
-  User,
-  UserCog2,
-  UserMinus2,
-  UserPlus2,
-  Users,
-  Users2,
-  Variable,
-  Wand2,
-  Workflow,
-  Wrench,
-  X,
-  XCircle,
-  Zap,
-  ZoomIn,
-  ZoomOut,
-  TwitterXIcon,
-};

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -477,7 +477,7 @@ const NodeToolbarComponent = memo(
                 });
               }}
               shortcut={shortcuts.find((s) =>
-                s.name.toLowerCase().startsWith("freeze path"),
+                s.name.toLowerCase().startsWith("freeze"),
               )}
               className={cn("node-toolbar-buttons", frozen && "text-blue-500")}
             />
@@ -684,8 +684,9 @@ const NodeToolbarComponent = memo(
                   <SelectItem value="freezeAll">
                     <ToolbarSelectItem
                       shortcut={
-                        shortcuts.find((obj) => obj.name === "Freeze")
+                        shortcuts.find((obj) =>
-                          ?.shortcut!
+                          obj.name.toLowerCase().startsWith("freeze"),
+                        )?.shortcut!
                       }
                       value={"Freeze"}
                       icon={"FreezeAll"}

src/frontend/src/pages/MainPage/utils/get-template-style.ts

@@ -5,6 +5,7 @@ import { iconExists } from "@/utils/styleUtils";
 export const useGetTemplateStyle = (
   flowData: FlowType,
 ): { getIcon: () => Promise<string> } => {
+  const types = useTypesStore((state) => state.types);
   const getIcon = async () => {
     if (
       flowData.is_component &&
@@ -13,7 +14,6 @@ export const useGetTemplateStyle = (
       const dataType = flowData.data?.nodes[0].data.type;
       const isGroup = !!flowData.data?.nodes[0].data.node?.flow;
       const icon = flowData.data?.nodes[0].data.node?.icon;
-      const types = useTypesStore((state) => state.types);
       const name = (await iconExists(dataType)) ? dataType : types[dataType];
       const iconName = icon || (isGroup ? "group_components" : name);
       return iconName;

src/frontend/src/utils/styleUtils.ts

@@ -1,11 +1,9 @@
-import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
 import { BotMessageSquareIcon } from "@/icons/BotMessageSquare";
 import { GradientSave } from "@/icons/GradientSparkles";
 import { TwitterLogoIcon } from "@radix-ui/react-icons";
 import dynamicIconImports from "lucide-react/dynamicIconImports";
 import { lazy } from "react";
 import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
-import { lucideIcons } from "../icons/lucideIcons";
 
 export const BG_NOISE =
   "url(data:image/png;base64,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)";
@@ -406,27 +404,12 @@ export const nodeIconToDisplayIconMap: Record<string, string> = {
   wrappers: "Gift",
   unknown: "HelpCircle",
   custom: "Edit",
-  BotMessageSquareIcon: "BotMessageSquare",
-  TextSearchIcon: "TextSearch",
-  ChevronsUpDown: "ChevronsUpDown",
-  SunIcon: "Sun",
-  MoonIcon: "Moon",
-  FolderIcon: "FolderIcon",
-  GradientSave: "GradientSave",
-  FolderPlusIcon: "FolderPlus",
-  PaperclipIcon: "Paperclip",
-  TerminalIcon: "TerminalIcon",
-  OptionIcon: "Option",
-  Option: "OptionIcon",
-  GlobeOkIcon: "GlobeOk",
   ThumbDownIconCustom: "ThumbDownCustom",
   ThumbUpIconCustom: "ThumbUpCustom",
   ScrapeGraphAI: "ScrapeGraph",
   ScrapeGraphSmartScraperApi: "ScrapeGraph",
   ScrapeGraphMarkdownifyApi: "ScrapeGraph",
-  Unlink: "UnlinkIcon",
   note: "StickyNote",
-  TwitterXIcon: "TwitterXIcon",
 };
 
 export const getLucideIconName = (name: string): string => {
@@ -437,40 +420,30 @@ export const getLucideIconName = (name: string): string => {
     Wand2: "wand-sparkles",
   };
   const kebabCaseName = name
+    .replace(/Icon/g, "")
     .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .replace(/(\d)/g, "-$1")
     .replace(/\s+/g, "-")
     .toLowerCase();
   return map[name] || kebabCaseName;
 };
 
 // Initialize icon mappings based on if we want to support lazy loading for cloud
-const iconMappingsPromise = ENABLE_DATASTAX_LANGFLOW
+const iconMappingsPromise = import("../icons/lazyIconImports").then(
-  ? import("../icons/lazyIconImports").then((module) => module.lazyIconsMapping)
+  (module) => module.lazyIconsMapping,
-  : import("../icons/eagerIconImports").then(
+);
-      (module) => module.eagerIconsMapping,
-    );
 
 export const eagerLoadedIconsMap = {
-  // Custom icons
-  GradientSave: GradientSave,
-  BotMessageSquareIcon: BotMessageSquareIcon,
-  "sticky-note": lucideIcons.StickyNote,
-
   // React icons
   FaApple: FaApple,
   FaDiscord: FaDiscord,
   FaGithub: FaGithub,
   TwitterLogoIcon: TwitterLogoIcon,
-
-  // All Lucide Icons
-  ...lucideIcons,
 };
 
 // Function to get a lazy-loaded icon component
 export const getNodeIcon = async (name: string) => {
   const iconName = nodeIconToDisplayIconMap[name];
-
-  // Always check eagerly loaded icons first
   if (eagerLoadedIconsMap[iconName || name]) {
     return eagerLoadedIconsMap[iconName || name];
   }
@@ -478,9 +451,7 @@ export const getNodeIcon = async (name: string) => {
   const iconMappings = await iconMappingsPromise;
 
   if (iconMappings[iconName || name]) {
-    return ENABLE_DATASTAX_LANGFLOW
+    return lazy(iconMappings[iconName || name]);
-      ? lazy(iconMappings[iconName || name])
-      : iconMappings[iconName || name];
   }
 
   const lucideIconName = getLucideIconName(iconName || name);