react-pulsable/dist/index.mjs

This is a simple and customizable react component library to add a pulsing/skeleton loading effect to your existing component.

import{useLayoutEffect as C,useRef as A}from"react";var P=`
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="40%"
    height="40%"
    viewBox="0 0 180.119 139.794"
  >
    <g transform="translate(-13.59 -66.639)" paintOrder="fill markers stroke">
      <path fill="#d0d0d0" d="M13.591 66.639H193.71v139.794H13.591z" />
      <path
        d="m118.507 133.514-34.249 34.249-15.968-15.968-41.938 41.937H178.726z"
        opacity=".675"
      />
      <circle cx="58.217" cy="108.555" r="11.773" opacity=".675" />
    </g>
  </svg>
`,N={pulse:"pl-animate",wave:"pl-animate-wave","wave-reverse":"pl-animate-wave-r",none:"pl-animate-none"};function z(a){var s=window.getComputedStyle(a,null),u=parseInt(s.getPropertyValue("height"),10),h=parseInt(s.getPropertyValue("font-size"),10),b=parseInt(s.getPropertyValue("line-height"),10),i=s.getPropertyValue("box-sizing");if(Number.isNaN(b)&&(b=h*1.2),i==="border-box"){var f=parseInt(s.getPropertyValue("padding-top"),10),p=parseInt(s.getPropertyValue("padding-bottom"),10),g=parseInt(s.getPropertyValue("border-top-width"),10),m=parseInt(s.getPropertyValue("border-bottom-width"),10);u=u-f-p-g-m}var o=Math.ceil(u/b);return{lines:o,font_size:h,height:u}}var y=({rootElement:a,config:s,loading:u=!0})=>{let{animation:h="wave",bgColors:b,noRounded:i=!1,noPadding:f=!1}=s||{},p=e=>{e?a.classList.add("pulsable-base"):a.classList.remove("pulsable-base")},g=e=>{e?a.classList.add("pl-css"):a.classList.remove("pl-css")},m=()=>{if(typeof window>"u")return null;let e=document.createElement("div"),c=e.cloneNode(!0);c.classList.add("pl-child-para-cont","pl-no-rounded","pl-child"),e.style.setProperty("--color-transparent-medium",b?.medium||"rgba(130, 130, 130, 0.3)"),e.style.setProperty("--color-transparent-light",b?.light||"rgba(130, 130, 130, 0.2)"),e.classList.add(N[h]);let r=e.cloneNode(!0);r.classList.add("pl-child-para"),e.classList.add("pl-child");let d=e.cloneNode(!0);d.classList.add("pl-child-circle"),i&&(e.classList.add("pl-no-rounded"),r.classList.add("pl-no-rounded"));let l=e.cloneNode(!0);l.classList.add("pl-child-hidden");let t=e.cloneNode(!0);t.classList.add("pl-child-rect");let n=e.cloneNode(!0);return n.classList.add("pl-child-rect-full"),{pCircle:()=>d.cloneNode(!0),pPara:()=>r.cloneNode(!0),pHidden:()=>l.cloneNode(!0),pRect:()=>t.cloneNode(!0),pRectFull:()=>n.cloneNode(!0),pParaCont:()=>c.cloneNode(!0)}};var o=null;requestAnimationFrame(()=>{if(!a){p(!1);return}if(a.classList.contains("pulsable-cont")||a.classList.add("pulsable-cont"),u){if(p(!0),g(!0),o||(o=m()),!o){p(!1),g(!1);return}let c=document.createElement("div");c.classList.add("pl-svg-cont"),c.innerHTML=P;let r=a.querySelectorAll(".pulsable");for(let d=0;d<r.length;d++){let l=r[d];if(l.classList.add("pl-element"),l.hasAttribute("disabled")||(l.classList.add("pl-has-disabled-attr"),l.setAttribute("disabled","true")),l.childNodes.forEach(t=>{t.classList&&!t.classList.contains("pl-child")&&(t.classList.add("pl-child-element"),t?.hasAttribute("disabled")||(t.classList.add("pl-has-disabled-attr"),t.setAttribute("disabled","true")))}),!l.querySelector(".pl-child")){var e;let t=l.classList;if(!o)return;if(t.contains("pulsable-circle"))e=o.pCircle();else if(t.contains("pulsable-hidden"))e=o.pHidden();else if(t.contains("pulsable-para")){e=o.pParaCont();let n=z(l),x=(n.height-n.font_size*n.lines)/(n.lines+2),w=`${Math.max(x,8)}px`;e.style.setProperty("padding-top",w),e.style.setProperty("padding-bottom",w);let v=o.pPara();i&&t.contains("pulsable-rounded")?v.classList.remove("pl-no-rounded"):!i&&t.contains("pulsable-no-rounded")&&v.classList.add("pl-no-rounded"),v.style.setProperty("height",`${n.font_size*80/100}px`);for(let k=0;k<n.lines;k++)e.appendChild(v.cloneNode(!0))}else f?t.contains("pulsable-padding")?e=o.pRect():e=o.pRectFull():t.contains("pulsable-no-padding")?e=o.pRectFull():e=o.pRect();t.contains("pulsable-img")&&e.appendChild(c),i&&t.contains("pulsable-rounded")?e.classList.remove("pl-no-rounded"):!i&&t.contains("pulsable-no-rounded")&&e.classList.add("pl-no-rounded"),l.parentNode?.appendChild(e),l.appendChild(e)}}p(!1)}else{let c=a.querySelectorAll(".pl-child");for(let t=0;t<c.length;t++){let n=c[t];n.parentNode?.removeChild(n)}let r=a.querySelectorAll(".pl-element");for(let t=0;t<r.length;t++)r[t].classList&&r[t].classList.remove("pl-element");let d=a.querySelectorAll(".pl-has-disabled-attr");for(let t=0;t<d.length;t++){let n=d[t];n.removeAttribute("disabled"),n.classList.remove("pl-has-disabled-attr")}let l=a.querySelectorAll(".pl-child-element");for(let t=0;t<l.length;t++)l[t].classList.remove("pl-child-element");g(!1),p(!1)}})};(typeof global<"u"||typeof globalThis<"u")&&(typeof global<"u"&&(global.setPulsing=y),typeof globalThis<"u"&&(globalThis.setPulsing=y));var L=y;import{jsx as I}from"react/jsx-runtime";var R=({children:a,isLoading:s,className:u,config:h,...b})=>{let{animation:i="wave",bgColors:f,noRadius:p=!1,noPadding:g=!1}=h||{},m=A(null);return C(()=>{m.current&&L({rootElement:m.current,config:{animation:i,bgColors:f,noRadius:p,noPadding:g},loading:s})},[s,m.current]),I("div",{ref:m,className:`${u} pulsable-cont pulsable-base`,...b,children:a})},F=R;export{F as default};