diff --git a/src/frontend/src/CustomNodes/GenericNode/components/nodeIcon/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/nodeIcon/index.tsx
index 8d2081957..17bf39f44 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/nodeIcon/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/nodeIcon/index.tsx
@@ -48,7 +48,7 @@ export function NodeIcon({
return (
(null);
+ const [TargetIcon, setTargetIcon] = useState
(iconCache.get(name));
useEffect(() => {
// Reset states when icon name changes
@@ -33,27 +33,44 @@ export const ForwardedIconComponent = memo(
setIconError(false);
setTargetIcon(null);
- const timer = setTimeout(() => {
- setShowFallback(true);
- }, 30);
+ const cachedIcon = iconCache.get(name);
+
+ const timer = cachedIcon
+ ? setTimeout(() => {
+ setShowFallback(true);
+ }, 30)
+ : null;
// Load the icon if we have a name
if (name && typeof name === "string") {
- getNodeIcon(name)
- .then((component) => {
- setTargetIcon(component);
- setShowFallback(false);
- })
- .catch((error) => {
- console.error(`Error loading icon ${name}:`, error);
- setIconError(true);
- setShowFallback(false);
- });
+ // Check if the icon is already in cache
+
+ if (cachedIcon && cachedIcon !== TargetIcon) {
+ setTargetIcon(cachedIcon);
+ setShowFallback(false);
+ } else {
+ getNodeIcon(name)
+ .then((component) => {
+ // Store the fetched icon in cache
+ iconCache.set(name, component);
+ setTargetIcon(component);
+ setShowFallback(false);
+ })
+ .catch((error) => {
+ console.error(`Error loading icon ${name}:`, error);
+ setIconError(true);
+ setShowFallback(false);
+ });
+ }
} else {
setShowFallback(false);
}
- return () => clearTimeout(timer);
+ return () => {
+ if (timer) {
+ clearTimeout(timer);
+ }
+ };
}
}, [name]);
diff --git a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
index 04241a8b1..4701e5be3 100644
--- a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
@@ -99,12 +99,6 @@ export const MenuBar = memo((): JSX.Element => {
[folders, currentFlowFolderId],
);
- useEffect(() => {
- if (measureRef.current) {
- setInputWidth(measureRef.current.offsetWidth);
- }
- }, [flowName]);
-
function handleAddFlow() {
try {
addFlow().then((id) => {
@@ -231,7 +225,7 @@ export const MenuBar = memo((): JSX.Element => {
if (measureRef.current) {
setInputWidth(measureRef.current.offsetWidth + 10);
}
- }, [flowName]);
+ }, [flowName, onFlowPage]);
const swatchIndex =
(currentFlowGradient && !isNaN(parseInt(currentFlowGradient))
diff --git a/src/frontend/src/components/core/appHeaderComponent/index.tsx b/src/frontend/src/components/core/appHeaderComponent/index.tsx
index b2877319f..1c62de25d 100644
--- a/src/frontend/src/components/core/appHeaderComponent/index.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/index.tsx
@@ -12,8 +12,6 @@ import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
import useTheme from "@/customization/hooks/use-custom-theme";
import { useResetDismissUpdateAll } from "@/hooks/use-reset-dismiss-update-all";
import useAlertStore from "@/stores/alertStore";
-import useFlowsManagerStore from "@/stores/flowsManagerStore";
-import { useFolderStore } from "@/stores/foldersStore";
import { useEffect, useRef, useState } from "react";
import { AccountMenu } from "./components/AccountMenu";
import FlowMenu from "./components/FlowMenu";
@@ -23,7 +21,6 @@ export default function AppHeader(): JSX.Element {
const notificationCenter = useAlertStore((state) => state.notificationCenter);
const navigate = useCustomNavigate();
const [activeState, setActiveState] = useState<"notifications" | null>(null);
- const lastPath = window.location.pathname.split("/").filter(Boolean).pop();
const notificationRef = useRef(null);
const notificationContentRef = useRef(null);
useTheme();
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
index f7b3e77c5..a475aafa1 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
@@ -15,6 +15,7 @@ import {
} from "@/components/ui/popover";
import { cn } from "@/utils/utils";
import { PopoverAnchor } from "@radix-ui/react-popover";
+import { uniqueId } from "lodash";
import { X } from "lucide-react";
import { ReactNode, useMemo, useState } from "react";
@@ -269,7 +270,7 @@ const CustomInputPopover = ({
autoComplete="off"
onFocus={() => setIsFocused(true)}
autoFocus={autoFocus}
- id={id}
+ id={id + uniqueId()}
ref={refInput}
type={!pwdVisible && password ? "password" : "text"}
onBlur={() => {
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 55c976c3e..22ff6ad48 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -126,6 +126,12 @@ export default function Page({
useState(null);
const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+ useEffect(() => {
+ if (currentFlowId !== "") {
+ isEmptyFlow.current = nodes.length === 0;
+ }
+ }, [currentFlowId]);
+
const [isAddingNote, setIsAddingNote] = useState(false);
const addComponent = useAddComponent();
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 9bf0bf632..7ba104f1f 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -6,6 +6,8 @@ import dynamicIconImports from "lucide-react/dynamicIconImports";
import { lazy } from "react";
import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
+export const iconCache = new Map();
+
export const BG_NOISE =
"url(data:image/png;base64,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)";