jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🐛 fix(genericIconComponent): wrap ForwardedIconComponent with memo to improve performance by preventing unnecessary re-renders

Browse source 
🔨 refactor(genericIconComponent): improve code readability by adding line breaks and indentation for better code organization and readability
This commit is contained in:
cristhianzl 2024-03-07 09:07:48 -03:00
commit 07e1d2a459
1 changed files with 43 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

84
src/frontend/src/components/genericIconComponent/index.tsx
View file

@ -1,51 +1,53 @@
import dynamicIconImports from "lucide-react/dynamicIconImports"; import dynamicIconImports from "lucide-react/dynamicIconImports";
import { Suspense, forwardRef, lazy } from "react"; import { Suspense, forwardRef, lazy, memo } from "react";
import { IconComponentProps } from "../../types/components"; import { IconComponentProps } from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils"; import { nodeIconsLucide } from "../../utils/styleUtils";
const ForwardedIconComponent = forwardRef( const ForwardedIconComponent = memo(
( forwardRef(
{ (
name, {
className, name,
iconColor, className,
stroke, iconColor,
strokeWidth, stroke,
id = "", strokeWidth,
}: IconComponentProps, id = "",
ref }: IconComponentProps,
) => { ref
let TargetIcon = nodeIconsLucide[name]; ) => {
if (!TargetIcon) { let TargetIcon = nodeIconsLucide[name];
// check if name exists in dynamicIconImports if (!TargetIcon) {
if (!dynamicIconImports[name]) { // check if name exists in dynamicIconImports
TargetIcon = nodeIconsLucide["unknown"]; if (!dynamicIconImports[name]) {
} else TargetIcon = lazy(dynamicIconImports[name]); TargetIcon = nodeIconsLucide["unknown"];
} } else TargetIcon = lazy(dynamicIconImports[name]);
}
const style = { const style = {
strokeWidth: strokeWidth ?? 1.5, strokeWidth: strokeWidth ?? 1.5,
...(stroke && { stroke: stroke }), ...(stroke && { stroke: stroke }),
...(iconColor && { color: iconColor, stroke: stroke }), ...(iconColor && { color: iconColor, stroke: stroke }),
}; };
if (!TargetIcon) { if (!TargetIcon) {
return null; // Render nothing until the icon is loaded return null; // Render nothing until the icon is loaded
}
const fallback = (
<div style={{ background: "#ddd", width: 24, height: 24 }} />
);
return (
<Suspense fallback={fallback}>
<TargetIcon
className={className}
style={style}
ref={ref}
data-testid={id ? `${id}-${name}` : `icon-${name}`}
/>
</Suspense>
);
} }
const fallback = ( )
<div style={{ background: "#ddd", width: 24, height: 24 }} />
);
return (
<Suspense fallback={fallback}>
<TargetIcon
className={className}
style={style}
ref={ref}
data-testid={id ? `${id}-${name}` : `icon-${name}`}
/>
</Suspense>
);
}
); );
export default ForwardedIconComponent; export default ForwardedIconComponent;