add loader while image is loading (#612)

Chainlit · Dec 27, 2023 · db3f256 · db3f256
1 parent b9aec4b
commit db3f256
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/libs/react-components/src/elements/Image.tsx b/libs/react-components/src/elements/Image.tsx
@@ -1,3 +1,7 @@
+import { useState } from 'react';
+
+import Skeleton from '@mui/material/Skeleton';
+
 import { type IImageElement } from 'client-types/';
 
 import { FrameElement } from './Frame';
@@ -18,15 +22,19 @@ const handleImageClick = (name: string, src: string) => {
 };
 
 const ImageElement = ({ element }: Props) => {
+  const [loading, setLoading] = useState(true);
+
   if (!element.url) {
     return null;
   }
 
   return (
     <FrameElement>
+      {loading && <Skeleton variant="rectangular" width="100%" height={200} />}
       <img
         className={`${element.display}-image`}
         src={element.url}
+        onLoad={() => setLoading(false)}
         onClick={() => {
           if (element.display === 'inline') {
             const name = `${element.name}.png`;