UNPKG

react-when-ready

Version:

React tools for content readiness orchestration. Provides context providers, hooks and components to coordinate smooth transitions when async content becomes available

3 lines (2 loc) 1.96 kB
import e,{createContext as n,useId as r,useContext as t,useLayoutEffect as u,useCallback as i,useRef as c,useMemo as o,useState as a}from"react";var d=function(){},f=n({register:d,unregister:d,markReady:d}),l=function(){var e=r(),n=t(f),c=n.markReady,o=n.register,a=n.unregister;return u((function(){return o(e),function(){return a(e)}}),[]),i((function(){return c(e)}),[e,c])},v=function(n){var r=n.children,t=n.onReady,u=l(),a=c(new Set),d=c(!1),v=c(!1),y=i((function(){d.current=!0,u(),null==t||t()}),[u,t]),m=o((function(){return{register:function(e){d.current||a.current.add(e)},unregister:function(e){d.current||(a.current.delete(e),v.current&&0===a.current.size&&y())},markReady:function(e){d.current||(v.current=!0,a.current.delete(e),0===a.current.size&&y())}}}),[y]);return e.createElement(f.Provider,{value:m},r)},y=function(e){!function(e,n,r){void 0===r&&(r=!0);var t=c(!1);u((function(){e&&(r&&t.current||(t.current=!0,n()))}))}(e,l())},m=function(e,n){var r=a(null),t=r[0],i=r[1];return u((function(){if(n>0){var r=setTimeout((function(){i(e)}),n);return function(){clearTimeout(r)}}i(e)}),[n,e]),t},s=function(e,n){var r;return null!==(r=m(e,e?n:0))&&void 0!==r&&r},g=function(n){var r=n.activeKey,t=n.renderByKey,u=n.loaderDelay,c=void 0===u?0:u,o=n.renderWithLoading,d=void 0===o?function(e){return e.content}:o,f=n.getContentWrapperStyle,l=void 0===f?function(e){return{display:e?"none":"contents"}}:f,y=a(),m=y[0],g=y[1],E=r===m?void 0:m,k=i((function(){return g(r)}),[r]),p=void 0!==E,R=void 0!==r,h=p||void 0===m,S=s(h,c);return d({content:e.createElement(e.Fragment,null,R&&e.createElement(v,{key:r,onReady:k},e.createElement("div",{style:l(h)},t(r))),p&&e.createElement(v,{key:E},e.createElement("div",{style:l(!1)},t(E)))),isShowLoading:S})};export{v as ReadinessPendingProvider,g as SwitchWhenReady,s as useDelayedLoading,m as useDelayedValue,y as useReadinessOnCondition,l as useReadinessReporter}; //# sourceMappingURL=index.esm.js.map