@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.06 kB
JavaScript
import{jsxs as t,jsx as i}from"react/jsx-runtime";import{styled as e,Box as r,Fade as o,Skeleton as n}from"@mui/material";import{useState as a}from"react";import{useInView as s}from"react-intersection-observer";const h=e("img")(({isLoaded:t})=>({display:"block",width:"100%",objectFit:"cover",height:"100%",opacity:t?1:0,filter:t?"blur(0px)":"blur(15px)",transform:t?"scale(1)":"scale(1.05)",transition:"opacity 0.5s ease-in-out, filter 0.5s ease-in-out, transform 0.5s ease-in-out",transitionDelay:"0.2s"})),l=({children:e,src:l,alt:c,width:d,height:m,containerSx:g,threshold:p=.1,rootMargin:u="500px",...f})=>{const[x,w]=a(!1),{ref:b,inView:v}=s({threshold:p,rootMargin:u,triggerOnce:!0});return t(r,{ref:b,sx:{position:"relative",width:d,height:m,overflow:"hidden",...g},children:[i(o,{in:!x,unmountOnExit:!0,children:i(r,{sx:{width:d,height:m,position:"absolute",inset:0},children:i(n,{variant:"rectangular",width:"100%",height:"100%"})})}),v&&i(h,{onLoad:()=>w(!0),alt:c,src:l,width:d,height:m,isLoaded:x,loading:"lazy",...f})]})};export{l as default};