pushed image bluing

components/artistPortfolio.tsx

@@ -3,6 +3,7 @@ import ImageList from '@mui/material/ImageList';
 import ImageListItem from '@mui/material/ImageListItem';
 import { useEffect, useState } from "react";
 import { fetchSellerPortfolio,getPortfolioUrl } from "../services/DiscoveryService";
+import ArtistPortfolioImage from './artistPortfolioImage';
 
 
 import { IconButton } from '@mui/material';
@@ -22,14 +23,7 @@ const ArtistPortfolio = ({artistId}) => {
       
         <ImageList  cols={2} rowHeight={200} sx={{maxHeight:400}}>
         {portfolioData.map((item) => (
-          <ImageListItem key={item.id}>
+          <ArtistPortfolioImage artistId={artistId} itemId={item.id} />
-            <img
-              srcSet={`${getPortfolioUrl(artistId,item.id)}`}
-              src={`${getPortfolioUrl(artistId,item.id)}`}
-              alt={item.title}
-              loading="lazy"
-            />
-          </ImageListItem>
         ))}
       </ImageList>)
 }

components/artistPortfolioImage.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import ImageList from '@mui/material/ImageList';
+import ImageListItem from '@mui/material/ImageListItem';
+import { useEffect, useState } from "react";
+import { fetchSellerPortfolio,getPortfolioUrl } from "../services/DiscoveryService";
+
+import { CircularProgress } from '@mui/material';
+
+import { IconButton } from '@mui/material';
+
+const ArtistPortfolioImage = ({artistId,itemId}) => {
+  const [loaded, setLoaded] = useState(false);
+  const handleImageLoaded = () => {
+    setLoaded(true);
+  };
+  const [portfolioData, setPortfolioData] = useState([]);
+  useEffect(() => {
+    const getData = async () => {
+      const data = await fetchSellerPortfolio(artistId);
+      console.log(data)
+      setPortfolioData(data);
+    }
+    getData();
+  }, []);
+    
+    return (
+        <ImageListItem key={itemId }>
+        <img
+          srcSet={`${getPortfolioUrl(artistId,itemId)}`}
+          src={`${getPortfolioUrl(artistId,itemId)}`}
+          alt={itemId}
+          loading="lazy"
+          style={{ filter: loaded ? 'blur(0)' : 'blur(10px)', backgroundColor:'grey' }}
+          onLoad={handleImageLoaded}
+        />
+      </ImageListItem>)
+}
+export default ArtistPortfolioImage