react-shimmer
Version:
React Image (Suspense-like) Loader component that simulates a shimmer effect
3 lines (2 loc) • 14.2 kB
JavaScript
"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=t(e),n=t(require("prop-types")),o=t(require("clsx"));function i(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}function a(t){return function(){var e=this,r=arguments;return new Promise((function(n,o){var a=t.apply(e,r);function c(t){i(a,n,o,c,u,"next",t)}function u(t){i(a,n,o,c,u,"throw",t)}c(void 0)}))}}function c(){return(c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}function u(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,f(t,e)}function s(t){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function f(t,e){return(f=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function l(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}function h(t,e,r){return(h=l()?Reflect.construct:function(t,e,r){var n=[null];n.push.apply(n,e);var o=new(Function.bind.apply(t,n));return r&&f(o,r.prototype),o}).apply(null,arguments)}function p(t){var e="function"==typeof Map?new Map:void 0;return(p=function(t){if(null===t||-1===Function.toString.call(t).indexOf("[native code]"))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,r)}function r(){return h(t,arguments,s(this).constructor)}return r.prototype=Object.create(t.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),f(r,t)})(t)}var d,m=(function(t){var e=function(t){var e=Object.prototype,r=e.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",i=n.asyncIterator||"@@asyncIterator",a=n.toStringTag||"@@toStringTag";function c(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(t){c=function(t,e,r){return t[e]=r}}function u(t,e,r,n){var o=Object.create((e&&e.prototype instanceof l?e:l).prototype),i=new k(n||[]);return o._invoke=function(t,e,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return{value:void 0,done:!0}}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=w(a,r);if(c){if(c===f)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var u=s(t,e,r);if("normal"===u.type){if(n=r.done?"completed":"suspendedYield",u.arg===f)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n="completed",r.method="throw",r.arg=u.arg)}}}(t,r,i),o}function s(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=u;var f={};function l(){}function h(){}function p(){}var d={};c(d,o,(function(){return this}));var m=Object.getPrototypeOf,v=m&&m(m(O([])));v&&v!==e&&r.call(v,o)&&(d=v);var y=p.prototype=l.prototype=Object.create(d);function g(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function b(t,e){var n;this._invoke=function(o,i){function a(){return new e((function(n,a){!function n(o,i,a,c){var u=s(t[o],t,i);if("throw"!==u.type){var f=u.arg,l=f.value;return l&&"object"==typeof l&&r.call(l,"__await")?e.resolve(l.__await).then((function(t){n("next",t,a,c)}),(function(t){n("throw",t,a,c)})):e.resolve(l).then((function(t){f.value=t,a(f)}),(function(t){return n("throw",t,a,c)}))}c(u.arg)}(o,i,n,a)}))}return n=n?n.then(a,a):a()}}function w(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,w(t,e),"throw"===e.method))return f;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return f}var n=s(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,f;var o=n.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,f):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,f)}function x(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function L(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function k(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(x,this),this.reset(!0)}function O(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var n=-1,i=function e(){for(;++n<t.length;)if(r.call(t,n))return e.value=t[n],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:E}}function E(){return{value:void 0,done:!0}}return h.prototype=p,c(y,"constructor",p),c(p,"constructor",h),h.displayName=c(p,a,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===h||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,c(t,a,"GeneratorFunction")),t.prototype=Object.create(y),t},t.awrap=function(t){return{__await:t}},g(b.prototype),c(b.prototype,i,(function(){return this})),t.AsyncIterator=b,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var a=new b(u(e,r,n,o),i);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},g(y),c(y,a,"Generator"),c(y,o,(function(){return this})),c(y,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=O,k.prototype={constructor:k,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(L),!t)for(var e in this)"t"===e.charAt(0)&&r.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function n(r,n){return a.type="throw",a.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var c=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,f):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),f},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),L(r),f}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;L(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:O(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),f}},t}(t.exports);try{regeneratorRuntime=e}catch(t){"object"==typeof globalThis?globalThis.regeneratorRuntime=e:Function("r","regeneratorRuntime = r")(e)}}(d={exports:{}}),d.exports),v=function(t){function e(e){var r;void 0===e&&(e="forcePromiseReject");for(var n=arguments.length,o=new Array(n>1?n-1:0),i=1;i<n;i++)o[i-1]=arguments[i];return(r=t.call.apply(t,[this].concat(o))||this).createdAt=new Date,r.intention=e,r}return u(e,t),e}(p(Error));function y(t,e){void 0===e&&(e={});var r=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}y(".fadein {\n animation-name: fadein;\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n}\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n");var g=["className"],b={isLoading:!1,error:""},w=function(t){function e(){var e;return(e=t.apply(this,arguments)||this).state=c({},b),e._isMounted=!1,e.imgRef=r.createRef(),e.start=a(m.mark((function t(){var r,n,o;return m.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(n=(r=e.props).fallback,o=r.delay,r.src&&n){t.next=6;break}return e.setState({error:"src and fallback props must be provided."}),t.abrupt("return");case 6:o&&o>0?e.timeoutId=setTimeout((function(){e.timeoutId=void 0,!e.state.error&&e._isMounted&&e.setState({isLoading:!0})}),o):e.setState({isLoading:!0}),e.tryLoadImage();case 8:case"end":return t.stop()}}),t)}))),e.loadImage=a(m.mark((function t(){var r,n;return m.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r=e.imgRef.current){t.next=3;break}return t.abrupt("return");case 3:return n=e.props.onLoad,t.abrupt("return",new Promise((function(t,o){e.forceReject=o;var i=function(){var e=a(m.mark((function e(){return m.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(void 0===r.decode){e.next=9;break}return e.prev=1,e.next=4,r.decode();case 4:e.next=9;break;case 6:e.prev=6,e.t0=e.catch(1);case 9:t(),n&&n(r);case 11:case"end":return e.stop()}}),e,null,[[1,6]])})));return function(){return e.apply(this,arguments)}}();r.complete?i():r.onload=i,r.onerror=function(){o(new Error("An Error occurred while trying to download an image"))}})));case 5:case"end":return t.stop()}}),t)}))),e.tryLoadImage=a(m.mark((function t(){return m.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,e.loadImage();case 3:e._isMounted&&e.setState({isLoading:!1}),t.next=9;break;case 6:t.prev=6,t.t0=t.catch(0),t.t0 instanceof v||!e._isMounted||e.setState({error:t.t0,isLoading:!1});case 9:case"end":return t.stop()}}),t,null,[[0,6]])}))),e}u(e,t);var n=e.prototype;return n.componentDidMount=function(){this._isMounted=!0,this.start()},n.componentDidUpdate=function(t){var e=this,r=this.props.src;r&&r!==t.src&&(this.safeClearTimeout(),this.forceReject&&this.forceReject(new v),this.setState(c({},b),(function(){return e.start()})))},n.componentWillUnmount=function(){this._isMounted=!1,this.forceReject=void 0,this.safeClearTimeout()},n.safeClearTimeout=function(){this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=void 0)},n.render=function(){var t=this.state,e=t.error,n=t.isLoading,i=this.props,a=i.src,c=i.fallback,u=i.errorFallback,s=i.fadeIn,f=i.NativeImgProps||{},l=f.className,h=function(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)e.indexOf(r=i[n])>=0||(o[r]=t[r]);return o}(f,g);return n?c:e?u?u(e):r.createElement("span",{role:"button","aria-label":"Image failed to load"},"❌"):a?r.createElement("img",Object.assign({},h,{className:o({fadein:s},l),ref:this.imgRef,decoding:"async",src:a})):null},e}(e.Component);w.propTypes={src:n.string.isRequired,fallback:n.element.isRequired,errorFallback:n.func,onLoad:n.func,delay:n.number,fadeIn:n.bool,NativeImgProps:n.object},y(":root {\n --default-bg-color: #f6f7f8;\n --default-bg-moving-gradient: linear-gradient(to right, rgb(238, 238, 238) 8%, rgb(222, 222, 222) 18%, rgb(238, 238, 238) 33%);\n}\n\n.shimmer {\n background: var(--default-bg-color);\n\tbackground-image: var(--default-bg-moving-gradient);\n background-repeat: no-repeat;\n animation: shimmering forwards infinite ease-in-out, fadein 0.02s forwards;\n}\n\n@keyframes fadein {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes shimmering {\n\tfrom {\n\t\tbackground-position: top right;\n\t}\n\n\tto {\n\t\tbackground-position: top left;\n\t}\n}\n");var x=function(t){var e=t.className,n=t.height,i=void 0===n?400:n,a=t.width,u=void 0===a?400:a,s=c({},function(t,e,r){return void 0===r&&(r=1600),{backgroundSize:10*t+"px "+e+"px",animationDuration:(r/1e3).toFixed(1)+"s"}}(u,i,t.duration),{height:i,width:u});return r.createElement("div",{className:o("shimmer",e),style:s})};x.propTypes={height:n.number.isRequired,width:n.number.isRequired,className:n.string,duration:n.number},y(":root {\n --default-bg-color: #e1e2e4;\n}\n\n.breathing {\n width: 100%;\n height: 100%;\n background: var(--default-bg-color);\n animation: breathing ease-in-out infinite alternate;\n}\n\n@keyframes breathing {\n from {\n opacity: 0.25;\n }\n to {\n opacity: 1;\n }\n}\n");var L=function(t){var e=t.className,n=t.duration,i={height:t.height,width:t.width,animationDuration:((void 0===n?1e3:n)/1e3).toFixed(1)+"s"};return r.createElement("div",{className:o("breathing",e),style:i})};L.propTypes={className:n.string,duration:n.number,height:n.oneOfType([n.string,n.number]),width:n.oneOfType([n.string,n.number])},exports.Breathing=L,exports.Image=w,exports.Shimmer=x;
//# sourceMappingURL=react-shimmer.cjs.production.min.js.map