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

Added loader for icon fallback

Browse source
This commit is contained in:
Lucas Oliveira 2024-03-30 17:53:47 +02:00
commit 92734e795b
1 changed files with 5 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,8 @@ import dynamicIconImports from "lucide-react/dynamicIconImports";
import { Suspense, forwardRef, lazy, memo } 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";
import { cn } from "../../utils/utils";
import Loading from "../ui/loading";
const ForwardedIconComponent = memo( const ForwardedIconComponent = memo(
forwardRef( forwardRef(
@ -34,7 +36,9 @@ const ForwardedIconComponent = memo(
return null; // Render nothing until the icon is loaded return null; // Render nothing until the icon is loaded
} }
const fallback = ( const fallback = (
<div style={{ background: "#ddd", width: 24, height: 24 }} /> <div className={cn(className, "flex items-center justify-center")}>
<Loading />
</div>
); );
return ( return (
<Suspense fallback={fallback}> <Suspense fallback={fallback}>