@commercetools-uikit/loading-spinner 12.2.2 → 12.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +5 -5
  2. package/dist/commercetools-uikit-loading-spinner.cjs.dev.js +48 -23
  3. package/dist/commercetools-uikit-loading-spinner.cjs.prod.js +45 -21
  4. package/dist/commercetools-uikit-loading-spinner.esm.js +45 -21
  5. package/dist/declarations/src/index.d.ts +2 -2
  6. package/dist/declarations/src/loading-spinner.d.ts +12 -11
  7. package/dist/declarations/src/version.d.ts +2 -2
  8. package/package.json +7 -11
package/README.md CHANGED
@@ -30,7 +30,6 @@ npm --save install react
30
30
  ## Usage
31
31
 
32
32
  ```jsx
33
- import React from 'react';
34
33
  import LoadingSpinner from '@commercetools-uikit/loading-spinner';
35
34
 
36
35
  const Example = () => <LoadingSpinner size="s">Loading</LoadingSpinner>;
@@ -40,7 +39,8 @@ export default Example;
40
39
 
41
40
  ## Properties
42
41
 
43
- | Props | Type | Required | Default | Description |
44
- | ---------- | -------------------------------------------- | :------: | ------- | ------------------------------------------------- |
45
- | `scale` | `union`<br/>Possible values:<br/>`'s' , 'l'` | | `'l'` | Set the size of the loading spinner. |
46
- | `children` | `ReactReactNode` | | | The content rendered inside the `LoadingSpinner`. |
42
+ | Props | Type | Required | Default | Description |
43
+ | ------------------ | -------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------- |
44
+ | `maxDelayDuration` | `number` | | `1000` | Set the amount of time to delay the loading spinner before it renders.&#xA;The default value of is 1000ms. |
45
+ | `scale` | `union`<br/>Possible values:<br/>`'s' , 'l'` | | `'l'` | Set the size of the loading spinner. |
46
+ | `children` | `ReactNode` | | | The content rendered inside the `LoadingSpinner`. |
package/dist/commercetools-uikit-loading-spinner.cjs.dev.js CHANGED
@@ -2,17 +2,21 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
5
6
  var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
6
7
  var _pt = require('prop-types');
7
- require('react');
8
+ var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
9
+ var react$1 = require('react');
8
10
  var react = require('@emotion/react');
9
11
  var designSystem = require('@commercetools-uikit/design-system');
10
12
  var Text = require('@commercetools-uikit/text');
11
13
  var Inline = require('@commercetools-uikit/spacings-inline');
14
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
12
15
 
13
16
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
14
17
 
15
18
  var _pt__default = /*#__PURE__*/_interopDefault(_pt);
19
+ var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
16
20
  var Text__default = /*#__PURE__*/_interopDefault(Text);
17
21
  var Inline__default = /*#__PURE__*/_interopDefault(Inline);
18
22
 
@@ -26,39 +30,60 @@ var sizePerScale = {
26
30
  };
27
31
  var positionOrigin = '20px';
28
32
  var defaultProps = {
29
- scale: 'l'
33
+ scale: 'l',
34
+ maxDelayDuration: 1000
30
35
  };
31
36
 
32
37
  var LoadingSpinner = function LoadingSpinner(props) {
38
+ var _useState = react$1.useState(false),
39
+ _useState2 = _slicedToArray(_useState, 2),
40
+ showSpinner = _useState2[0],
41
+ setShowSpinner = _useState2[1];
42
+
33
43
  var size = sizePerScale[props.scale];
34
- return react.jsx(Inline__default['default'], {
35
- alignItems: "center"
36
- }, react.jsx("div", {
37
- css: /*#__PURE__*/react.css("width:", size, ";height:", size, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;"))
38
- }, react.jsx("svg", {
39
- css: /*#__PURE__*/react.css("width:", size, ";height:", size, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;")),
40
- viewBox: "0 0 40 40"
41
- }, react.jsx("path", {
42
- css: /*#__PURE__*/react.css("fill:", designSystem.customProperties.colorAccent, ";opacity:0.2;" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;")),
43
- d: circlePath
44
- }), react.jsx("path", {
45
- css: /*#__PURE__*/react.css("animation:", spin, " 0.5s infinite linear;fill:", designSystem.customProperties.colorAccent, ";transform-origin:", positionOrigin, " ", positionOrigin, " 0;" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;")),
46
- d: pointerPath
47
- }))), props.children && react.jsx(Text__default['default'].Detail, {
48
- tone: "secondary"
49
- }, props.children));
44
+ react$1.useEffect(function () {
45
+ var delaySpinnerTimeout = _setTimeout__default["default"](function () {
46
+ return setShowSpinner(true);
47
+ }, props.maxDelayDuration);
48
+
49
+ return function () {
50
+ return clearTimeout(delaySpinnerTimeout);
51
+ };
52
+ }, [props.maxDelayDuration]);
53
+ if (!showSpinner) return null;
54
+ return jsxRuntime.jsxs(Inline__default["default"], {
55
+ alignItems: "center",
56
+ children: [jsxRuntime.jsx("div", {
57
+ css: /*#__PURE__*/react.css("width:", size, ";height:", size, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvYWRpbmctc3Bpbm5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0VnQiIsImZpbGUiOiJsb2FkaW5nLXNwaW5uZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlLCB1c2VTdGF0ZSwgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCBUZXh0IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3RleHQnO1xuaW1wb3J0IElubGluZSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1pbmxpbmUnO1xuXG5jb25zdCBjaXJjbGVQYXRoID1cbiAgJ00yMC4yMDEsNS4xNjljLTguMjU0LDAtMTQuOTQ2LDYuNjkyLTE0Ljk0NiwxNC45NDZjMCw4LjI1NSw2LjY5MiwxNC45NDYsMTQuOTQ2LDE0Ljk0NiBzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNGMwLTYuNDI1LDUuMjA5LTExLjYzNCwxMS42MzQtMTEuNjM0YzYuNDI1LDAsMTEuNjMzLDUuMjA5LDExLjYzMywxMS42MzRDMzEuODM0LDI2LjU0MSwyNi42MjYsMzEuNzQ5LDIwLjIwMSwzMS43NDl6JztcbmNvbnN0IHBvaW50ZXJQYXRoID1cbiAgJ00yNi4wMTMsMTAuMDQ3bDEuNjU0LTIuODY2Yy0yLjE5OC0xLjI3Mi00Ljc0My0yLjAxMi03LjQ2Ni0yLjAxMmgwdjMuMzEyaDAgQzIyLjMyLDguNDgxLDI0LjMwMSw5LjA1NywyNi4wMTMsMTAuMDQ3eic7XG5cbmNvbnN0IHNwaW4gPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmA7XG5cbmNvbnN0IHNpemVQZXJTY2FsZSA9IHtcbiAgczogJzE4cHgnLFxuICBsOiAnMzJweCcsXG59O1xuXG5jb25zdCBwb3NpdGlvbk9yaWdpbiA9ICcyMHB4JztcblxudHlwZSBUTG9hZGluZ1NwaW5uZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFNldCB0aGUgYW1vdW50IG9mIHRpbWUgdG8gZGVsYXkgdGhlIGxvYWRpbmcgc3Bpbm5lciBiZWZvcmUgaXQgcmVuZGVycy5cbiAgICogVGhlIGRlZmF1bHQgdmFsdWUgb2YgaXMgMTAwMG1zLlxuICAgKi9cbiAgbWF4RGVsYXlEdXJhdGlvbj86IG51bWJlcjtcbiAgLyoqXG4gICAqIFNldCB0aGUgc2l6ZSBvZiB0aGUgbG9hZGluZyBzcGlubmVyLlxuICAgKi9cbiAgc2NhbGU6ICdzJyB8ICdsJztcbiAgLyoqXG4gICAqIFRoZSBjb250ZW50IHJlbmRlcmVkIGluc2lkZSB0aGUgYExvYWRpbmdTcGlubmVyYC5cbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRMb2FkaW5nU3Bpbm5lclByb3BzLCAnc2NhbGUnIHwgJ21heERlbGF5RHVyYXRpb24nPiA9IHtcbiAgc2NhbGU6ICdsJyxcbiAgbWF4RGVsYXlEdXJhdGlvbjogMTAwMCxcbn07XG5cbmNvbnN0IExvYWRpbmdTcGlubmVyID0gKHByb3BzOiBUTG9hZGluZ1NwaW5uZXJQcm9wcykgPT4ge1xuICBjb25zdCBbc2hvd1NwaW5uZXIsIHNldFNob3dTcGlubmVyXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3Qgc2l6ZSA9IHNpemVQZXJTY2FsZVtwcm9wcy5zY2FsZV07XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgZGVsYXlTcGlubmVyVGltZW91dCA9IHNldFRpbWVvdXQoXG4gICAgICAoKSA9PiBzZXRTaG93U3Bpbm5lcih0cnVlKSxcbiAgICAgIHByb3BzLm1heERlbGF5RHVyYXRpb25cbiAgICApO1xuXG4gICAgcmV0dXJuICgpID0+IGNsZWFyVGltZW91dChkZWxheVNwaW5uZXJUaW1lb3V0KTtcbiAgfSwgW3Byb3BzLm1heERlbGF5RHVyYXRpb25dKTtcblxuICBpZiAoIXNob3dTcGlubmVyKSByZXR1cm4gbnVsbDtcblxuICByZXR1cm4gKFxuICAgIDxJbmxpbmUgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICB3aWR0aDogJHtzaXplfTtcbiAgICAgICAgICBoZWlnaHQ6ICR7c2l6ZX07XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxzdmdcbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHdpZHRoOiAke3NpemV9O1xuICAgICAgICAgICAgaGVpZ2h0OiAke3NpemV9O1xuICAgICAgICAgIGB9XG4gICAgICAgICAgdmlld0JveD1cIjAgMCA0MCA0MFwiXG4gICAgICAgID5cbiAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIG9wYWNpdHk6IDAuMjtcbiAgICAgICAgICAgIGB9XG4gICAgICAgICAgICBkPXtjaXJjbGVQYXRofVxuICAgICAgICAgIC8+XG4gICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICBhbmltYXRpb246ICR7c3Bpbn0gMC41cyBpbmZpbml0ZSBsaW5lYXI7XG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIHRyYW5zZm9ybS1vcmlnaW46ICR7cG9zaXRpb25PcmlnaW59ICR7cG9zaXRpb25PcmlnaW59IDA7XG4gICAgICAgICAgICBgfVxuICAgICAgICAgICAgZD17cG9pbnRlclBhdGh9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICA8L2Rpdj5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbiAmJiAoXG4gICAgICAgIDxUZXh0LkRldGFpbCB0b25lPVwic2Vjb25kYXJ5XCI+e3Byb3BzLmNoaWxkcmVufTwvVGV4dC5EZXRhaWw+XG4gICAgICApfVxuICAgIDwvSW5saW5lPlxuICApO1xufTtcbkxvYWRpbmdTcGlubmVyLmRpc3BsYXlOYW1lID0gJ0xvYWRpbmdTcGlubmVyJztcbkxvYWRpbmdTcGlubmVyLmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgTG9hZGluZ1NwaW5uZXI7XG4iXX0= */"),
58
+ children: jsxRuntime.jsxs("svg", {
59
+ css: /*#__PURE__*/react.css("width:", size, ";height:", size, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvYWRpbmctc3Bpbm5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0VrQiIsImZpbGUiOiJsb2FkaW5nLXNwaW5uZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlLCB1c2VTdGF0ZSwgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCBUZXh0IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3RleHQnO1xuaW1wb3J0IElubGluZSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1pbmxpbmUnO1xuXG5jb25zdCBjaXJjbGVQYXRoID1cbiAgJ00yMC4yMDEsNS4xNjljLTguMjU0LDAtMTQuOTQ2LDYuNjkyLTE0Ljk0NiwxNC45NDZjMCw4LjI1NSw2LjY5MiwxNC45NDYsMTQuOTQ2LDE0Ljk0NiBzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNGMwLTYuNDI1LDUuMjA5LTExLjYzNCwxMS42MzQtMTEuNjM0YzYuNDI1LDAsMTEuNjMzLDUuMjA5LDExLjYzMywxMS42MzRDMzEuODM0LDI2LjU0MSwyNi42MjYsMzEuNzQ5LDIwLjIwMSwzMS43NDl6JztcbmNvbnN0IHBvaW50ZXJQYXRoID1cbiAgJ00yNi4wMTMsMTAuMDQ3bDEuNjU0LTIuODY2Yy0yLjE5OC0xLjI3Mi00Ljc0My0yLjAxMi03LjQ2Ni0yLjAxMmgwdjMuMzEyaDAgQzIyLjMyLDguNDgxLDI0LjMwMSw5LjA1NywyNi4wMTMsMTAuMDQ3eic7XG5cbmNvbnN0IHNwaW4gPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmA7XG5cbmNvbnN0IHNpemVQZXJTY2FsZSA9IHtcbiAgczogJzE4cHgnLFxuICBsOiAnMzJweCcsXG59O1xuXG5jb25zdCBwb3NpdGlvbk9yaWdpbiA9ICcyMHB4JztcblxudHlwZSBUTG9hZGluZ1NwaW5uZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFNldCB0aGUgYW1vdW50IG9mIHRpbWUgdG8gZGVsYXkgdGhlIGxvYWRpbmcgc3Bpbm5lciBiZWZvcmUgaXQgcmVuZGVycy5cbiAgICogVGhlIGRlZmF1bHQgdmFsdWUgb2YgaXMgMTAwMG1zLlxuICAgKi9cbiAgbWF4RGVsYXlEdXJhdGlvbj86IG51bWJlcjtcbiAgLyoqXG4gICAqIFNldCB0aGUgc2l6ZSBvZiB0aGUgbG9hZGluZyBzcGlubmVyLlxuICAgKi9cbiAgc2NhbGU6ICdzJyB8ICdsJztcbiAgLyoqXG4gICAqIFRoZSBjb250ZW50IHJlbmRlcmVkIGluc2lkZSB0aGUgYExvYWRpbmdTcGlubmVyYC5cbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRMb2FkaW5nU3Bpbm5lclByb3BzLCAnc2NhbGUnIHwgJ21heERlbGF5RHVyYXRpb24nPiA9IHtcbiAgc2NhbGU6ICdsJyxcbiAgbWF4RGVsYXlEdXJhdGlvbjogMTAwMCxcbn07XG5cbmNvbnN0IExvYWRpbmdTcGlubmVyID0gKHByb3BzOiBUTG9hZGluZ1NwaW5uZXJQcm9wcykgPT4ge1xuICBjb25zdCBbc2hvd1NwaW5uZXIsIHNldFNob3dTcGlubmVyXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3Qgc2l6ZSA9IHNpemVQZXJTY2FsZVtwcm9wcy5zY2FsZV07XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgZGVsYXlTcGlubmVyVGltZW91dCA9IHNldFRpbWVvdXQoXG4gICAgICAoKSA9PiBzZXRTaG93U3Bpbm5lcih0cnVlKSxcbiAgICAgIHByb3BzLm1heERlbGF5RHVyYXRpb25cbiAgICApO1xuXG4gICAgcmV0dXJuICgpID0+IGNsZWFyVGltZW91dChkZWxheVNwaW5uZXJUaW1lb3V0KTtcbiAgfSwgW3Byb3BzLm1heERlbGF5RHVyYXRpb25dKTtcblxuICBpZiAoIXNob3dTcGlubmVyKSByZXR1cm4gbnVsbDtcblxuICByZXR1cm4gKFxuICAgIDxJbmxpbmUgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICB3aWR0aDogJHtzaXplfTtcbiAgICAgICAgICBoZWlnaHQ6ICR7c2l6ZX07XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxzdmdcbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHdpZHRoOiAke3NpemV9O1xuICAgICAgICAgICAgaGVpZ2h0OiAke3NpemV9O1xuICAgICAgICAgIGB9XG4gICAgICAgICAgdmlld0JveD1cIjAgMCA0MCA0MFwiXG4gICAgICAgID5cbiAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIG9wYWNpdHk6IDAuMjtcbiAgICAgICAgICAgIGB9XG4gICAgICAgICAgICBkPXtjaXJjbGVQYXRofVxuICAgICAgICAgIC8+XG4gICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICBhbmltYXRpb246ICR7c3Bpbn0gMC41cyBpbmZpbml0ZSBsaW5lYXI7XG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIHRyYW5zZm9ybS1vcmlnaW46ICR7cG9zaXRpb25PcmlnaW59ICR7cG9zaXRpb25PcmlnaW59IDA7XG4gICAgICAgICAgICBgfVxuICAgICAgICAgICAgZD17cG9pbnRlclBhdGh9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICA8L2Rpdj5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbiAmJiAoXG4gICAgICAgIDxUZXh0LkRldGFpbCB0b25lPVwic2Vjb25kYXJ5XCI+e3Byb3BzLmNoaWxkcmVufTwvVGV4dC5EZXRhaWw+XG4gICAgICApfVxuICAgIDwvSW5saW5lPlxuICApO1xufTtcbkxvYWRpbmdTcGlubmVyLmRpc3BsYXlOYW1lID0gJ0xvYWRpbmdTcGlubmVyJztcbkxvYWRpbmdTcGlubmVyLmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgTG9hZGluZ1NwaW5uZXI7XG4iXX0= */"),
60
+ viewBox: "0 0 40 40",
61
+ children: [jsxRuntime.jsx("path", {
62
+ css: /*#__PURE__*/react.css("fill:", designSystem.customProperties.colorAccent, ";opacity:0.2;" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvYWRpbmctc3Bpbm5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0VvQiIsImZpbGUiOiJsb2FkaW5nLXNwaW5uZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlLCB1c2VTdGF0ZSwgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCBUZXh0IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3RleHQnO1xuaW1wb3J0IElubGluZSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1pbmxpbmUnO1xuXG5jb25zdCBjaXJjbGVQYXRoID1cbiAgJ00yMC4yMDEsNS4xNjljLTguMjU0LDAtMTQuOTQ2LDYuNjkyLTE0Ljk0NiwxNC45NDZjMCw4LjI1NSw2LjY5MiwxNC45NDYsMTQuOTQ2LDE0Ljk0NiBzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNGMwLTYuNDI1LDUuMjA5LTExLjYzNCwxMS42MzQtMTEuNjM0YzYuNDI1LDAsMTEuNjMzLDUuMjA5LDExLjYzMywxMS42MzRDMzEuODM0LDI2LjU0MSwyNi42MjYsMzEuNzQ5LDIwLjIwMSwzMS43NDl6JztcbmNvbnN0IHBvaW50ZXJQYXRoID1cbiAgJ00yNi4wMTMsMTAuMDQ3bDEuNjU0LTIuODY2Yy0yLjE5OC0xLjI3Mi00Ljc0My0yLjAxMi03LjQ2Ni0yLjAxMmgwdjMuMzEyaDAgQzIyLjMyLDguNDgxLDI0LjMwMSw5LjA1NywyNi4wMTMsMTAuMDQ3eic7XG5cbmNvbnN0IHNwaW4gPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmA7XG5cbmNvbnN0IHNpemVQZXJTY2FsZSA9IHtcbiAgczogJzE4cHgnLFxuICBsOiAnMzJweCcsXG59O1xuXG5jb25zdCBwb3NpdGlvbk9yaWdpbiA9ICcyMHB4JztcblxudHlwZSBUTG9hZGluZ1NwaW5uZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFNldCB0aGUgYW1vdW50IG9mIHRpbWUgdG8gZGVsYXkgdGhlIGxvYWRpbmcgc3Bpbm5lciBiZWZvcmUgaXQgcmVuZGVycy5cbiAgICogVGhlIGRlZmF1bHQgdmFsdWUgb2YgaXMgMTAwMG1zLlxuICAgKi9cbiAgbWF4RGVsYXlEdXJhdGlvbj86IG51bWJlcjtcbiAgLyoqXG4gICAqIFNldCB0aGUgc2l6ZSBvZiB0aGUgbG9hZGluZyBzcGlubmVyLlxuICAgKi9cbiAgc2NhbGU6ICdzJyB8ICdsJztcbiAgLyoqXG4gICAqIFRoZSBjb250ZW50IHJlbmRlcmVkIGluc2lkZSB0aGUgYExvYWRpbmdTcGlubmVyYC5cbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRMb2FkaW5nU3Bpbm5lclByb3BzLCAnc2NhbGUnIHwgJ21heERlbGF5RHVyYXRpb24nPiA9IHtcbiAgc2NhbGU6ICdsJyxcbiAgbWF4RGVsYXlEdXJhdGlvbjogMTAwMCxcbn07XG5cbmNvbnN0IExvYWRpbmdTcGlubmVyID0gKHByb3BzOiBUTG9hZGluZ1NwaW5uZXJQcm9wcykgPT4ge1xuICBjb25zdCBbc2hvd1NwaW5uZXIsIHNldFNob3dTcGlubmVyXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3Qgc2l6ZSA9IHNpemVQZXJTY2FsZVtwcm9wcy5zY2FsZV07XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgZGVsYXlTcGlubmVyVGltZW91dCA9IHNldFRpbWVvdXQoXG4gICAgICAoKSA9PiBzZXRTaG93U3Bpbm5lcih0cnVlKSxcbiAgICAgIHByb3BzLm1heERlbGF5RHVyYXRpb25cbiAgICApO1xuXG4gICAgcmV0dXJuICgpID0+IGNsZWFyVGltZW91dChkZWxheVNwaW5uZXJUaW1lb3V0KTtcbiAgfSwgW3Byb3BzLm1heERlbGF5RHVyYXRpb25dKTtcblxuICBpZiAoIXNob3dTcGlubmVyKSByZXR1cm4gbnVsbDtcblxuICByZXR1cm4gKFxuICAgIDxJbmxpbmUgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICB3aWR0aDogJHtzaXplfTtcbiAgICAgICAgICBoZWlnaHQ6ICR7c2l6ZX07XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxzdmdcbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHdpZHRoOiAke3NpemV9O1xuICAgICAgICAgICAgaGVpZ2h0OiAke3NpemV9O1xuICAgICAgICAgIGB9XG4gICAgICAgICAgdmlld0JveD1cIjAgMCA0MCA0MFwiXG4gICAgICAgID5cbiAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIG9wYWNpdHk6IDAuMjtcbiAgICAgICAgICAgIGB9XG4gICAgICAgICAgICBkPXtjaXJjbGVQYXRofVxuICAgICAgICAgIC8+XG4gICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICBhbmltYXRpb246ICR7c3Bpbn0gMC41cyBpbmZpbml0ZSBsaW5lYXI7XG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIHRyYW5zZm9ybS1vcmlnaW46ICR7cG9zaXRpb25PcmlnaW59ICR7cG9zaXRpb25PcmlnaW59IDA7XG4gICAgICAgICAgICBgfVxuICAgICAgICAgICAgZD17cG9pbnRlclBhdGh9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICA8L2Rpdj5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbiAmJiAoXG4gICAgICAgIDxUZXh0LkRldGFpbCB0b25lPVwic2Vjb25kYXJ5XCI+e3Byb3BzLmNoaWxkcmVufTwvVGV4dC5EZXRhaWw+XG4gICAgICApfVxuICAgIDwvSW5saW5lPlxuICApO1xufTtcbkxvYWRpbmdTcGlubmVyLmRpc3BsYXlOYW1lID0gJ0xvYWRpbmdTcGlubmVyJztcbkxvYWRpbmdTcGlubmVyLmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgTG9hZGluZ1NwaW5uZXI7XG4iXX0= */"),
63
+ d: circlePath
64
+ }), jsxRuntime.jsx("path", {
65
+ css: /*#__PURE__*/react.css("animation:", spin, " 0.5s infinite linear;fill:", designSystem.customProperties.colorAccent, ";transform-origin:", positionOrigin, " ", positionOrigin, " 0;" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvYWRpbmctc3Bpbm5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0ZvQiIsImZpbGUiOiJsb2FkaW5nLXNwaW5uZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlLCB1c2VTdGF0ZSwgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCBUZXh0IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3RleHQnO1xuaW1wb3J0IElubGluZSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1pbmxpbmUnO1xuXG5jb25zdCBjaXJjbGVQYXRoID1cbiAgJ00yMC4yMDEsNS4xNjljLTguMjU0LDAtMTQuOTQ2LDYuNjkyLTE0Ljk0NiwxNC45NDZjMCw4LjI1NSw2LjY5MiwxNC45NDYsMTQuOTQ2LDE0Ljk0NiBzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNGMwLTYuNDI1LDUuMjA5LTExLjYzNCwxMS42MzQtMTEuNjM0YzYuNDI1LDAsMTEuNjMzLDUuMjA5LDExLjYzMywxMS42MzRDMzEuODM0LDI2LjU0MSwyNi42MjYsMzEuNzQ5LDIwLjIwMSwzMS43NDl6JztcbmNvbnN0IHBvaW50ZXJQYXRoID1cbiAgJ00yNi4wMTMsMTAuMDQ3bDEuNjU0LTIuODY2Yy0yLjE5OC0xLjI3Mi00Ljc0My0yLjAxMi03LjQ2Ni0yLjAxMmgwdjMuMzEyaDAgQzIyLjMyLDguNDgxLDI0LjMwMSw5LjA1NywyNi4wMTMsMTAuMDQ3eic7XG5cbmNvbnN0IHNwaW4gPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmA7XG5cbmNvbnN0IHNpemVQZXJTY2FsZSA9IHtcbiAgczogJzE4cHgnLFxuICBsOiAnMzJweCcsXG59O1xuXG5jb25zdCBwb3NpdGlvbk9yaWdpbiA9ICcyMHB4JztcblxudHlwZSBUTG9hZGluZ1NwaW5uZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFNldCB0aGUgYW1vdW50IG9mIHRpbWUgdG8gZGVsYXkgdGhlIGxvYWRpbmcgc3Bpbm5lciBiZWZvcmUgaXQgcmVuZGVycy5cbiAgICogVGhlIGRlZmF1bHQgdmFsdWUgb2YgaXMgMTAwMG1zLlxuICAgKi9cbiAgbWF4RGVsYXlEdXJhdGlvbj86IG51bWJlcjtcbiAgLyoqXG4gICAqIFNldCB0aGUgc2l6ZSBvZiB0aGUgbG9hZGluZyBzcGlubmVyLlxuICAgKi9cbiAgc2NhbGU6ICdzJyB8ICdsJztcbiAgLyoqXG4gICAqIFRoZSBjb250ZW50IHJlbmRlcmVkIGluc2lkZSB0aGUgYExvYWRpbmdTcGlubmVyYC5cbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRMb2FkaW5nU3Bpbm5lclByb3BzLCAnc2NhbGUnIHwgJ21heERlbGF5RHVyYXRpb24nPiA9IHtcbiAgc2NhbGU6ICdsJyxcbiAgbWF4RGVsYXlEdXJhdGlvbjogMTAwMCxcbn07XG5cbmNvbnN0IExvYWRpbmdTcGlubmVyID0gKHByb3BzOiBUTG9hZGluZ1NwaW5uZXJQcm9wcykgPT4ge1xuICBjb25zdCBbc2hvd1NwaW5uZXIsIHNldFNob3dTcGlubmVyXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3Qgc2l6ZSA9IHNpemVQZXJTY2FsZVtwcm9wcy5zY2FsZV07XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgZGVsYXlTcGlubmVyVGltZW91dCA9IHNldFRpbWVvdXQoXG4gICAgICAoKSA9PiBzZXRTaG93U3Bpbm5lcih0cnVlKSxcbiAgICAgIHByb3BzLm1heERlbGF5RHVyYXRpb25cbiAgICApO1xuXG4gICAgcmV0dXJuICgpID0+IGNsZWFyVGltZW91dChkZWxheVNwaW5uZXJUaW1lb3V0KTtcbiAgfSwgW3Byb3BzLm1heERlbGF5RHVyYXRpb25dKTtcblxuICBpZiAoIXNob3dTcGlubmVyKSByZXR1cm4gbnVsbDtcblxuICByZXR1cm4gKFxuICAgIDxJbmxpbmUgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICB3aWR0aDogJHtzaXplfTtcbiAgICAgICAgICBoZWlnaHQ6ICR7c2l6ZX07XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxzdmdcbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHdpZHRoOiAke3NpemV9O1xuICAgICAgICAgICAgaGVpZ2h0OiAke3NpemV9O1xuICAgICAgICAgIGB9XG4gICAgICAgICAgdmlld0JveD1cIjAgMCA0MCA0MFwiXG4gICAgICAgID5cbiAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIG9wYWNpdHk6IDAuMjtcbiAgICAgICAgICAgIGB9XG4gICAgICAgICAgICBkPXtjaXJjbGVQYXRofVxuICAgICAgICAgIC8+XG4gICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICBhbmltYXRpb246ICR7c3Bpbn0gMC41cyBpbmZpbml0ZSBsaW5lYXI7XG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIHRyYW5zZm9ybS1vcmlnaW46ICR7cG9zaXRpb25PcmlnaW59ICR7cG9zaXRpb25PcmlnaW59IDA7XG4gICAgICAgICAgICBgfVxuICAgICAgICAgICAgZD17cG9pbnRlclBhdGh9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICA8L2Rpdj5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbiAmJiAoXG4gICAgICAgIDxUZXh0LkRldGFpbCB0b25lPVwic2Vjb25kYXJ5XCI+e3Byb3BzLmNoaWxkcmVufTwvVGV4dC5EZXRhaWw+XG4gICAgICApfVxuICAgIDwvSW5saW5lPlxuICApO1xufTtcbkxvYWRpbmdTcGlubmVyLmRpc3BsYXlOYW1lID0gJ0xvYWRpbmdTcGlubmVyJztcbkxvYWRpbmdTcGlubmVyLmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgTG9hZGluZ1NwaW5uZXI7XG4iXX0= */"),
66
+ d: pointerPath
67
+ })]
68
+ })
69
+ }), props.children && jsxRuntime.jsx(Text__default["default"].Detail, {
70
+ tone: "secondary",
71
+ children: props.children
72
+ })]
73
+ });
50
74
  };
51
75
 
52
76
  LoadingSpinner.propTypes = process.env.NODE_ENV !== "production" ? {
53
- scale: _pt__default['default'].oneOf(['s', 'l']).isRequired,
54
- children: _pt__default['default'].node
77
+ maxDelayDuration: _pt__default["default"].number,
78
+ scale: _pt__default["default"].oneOf(['s', 'l']).isRequired,
79
+ children: _pt__default["default"].node
55
80
  } : {};
56
81
  LoadingSpinner.displayName = 'LoadingSpinner';
57
82
  LoadingSpinner.defaultProps = defaultProps;
58
83
  var LoadingSpinner$1 = LoadingSpinner;
59
84
 
60
- // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
61
- var version = '12.2.2';
85
+ // NOTE: This string will be replaced on build time with the package version.
86
+ var version = "12.2.9";
62
87
 
63
- exports['default'] = LoadingSpinner$1;
88
+ exports["default"] = LoadingSpinner$1;
64
89
  exports.version = version;
package/dist/commercetools-uikit-loading-spinner.cjs.prod.js CHANGED
@@ -2,16 +2,20 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
5
6
  var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
6
7
  require('prop-types');
7
- require('react');
8
+ var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
9
+ var react$1 = require('react');
8
10
  var react = require('@emotion/react');
9
11
  var designSystem = require('@commercetools-uikit/design-system');
10
12
  var Text = require('@commercetools-uikit/text');
11
13
  var Inline = require('@commercetools-uikit/spacings-inline');
14
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
12
15
 
13
16
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
14
17
 
18
+ var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
15
19
  var Text__default = /*#__PURE__*/_interopDefault(Text);
16
20
  var Inline__default = /*#__PURE__*/_interopDefault(Inline);
17
21
 
@@ -25,27 +29,47 @@ var sizePerScale = {
25
29
  };
26
30
  var positionOrigin = '20px';
27
31
  var defaultProps = {
28
- scale: 'l'
32
+ scale: 'l',
33
+ maxDelayDuration: 1000
29
34
  };
30
35
 
31
36
  var LoadingSpinner = function LoadingSpinner(props) {
37
+ var _useState = react$1.useState(false),
38
+ _useState2 = _slicedToArray(_useState, 2),
39
+ showSpinner = _useState2[0],
40
+ setShowSpinner = _useState2[1];
41
+
32
42
  var size = sizePerScale[props.scale];
33
- return react.jsx(Inline__default['default'], {
34
- alignItems: "center"
35
- }, react.jsx("div", {
36
- css: /*#__PURE__*/react.css("width:", size, ";height:", size, ";" + ("" ))
37
- }, react.jsx("svg", {
38
- css: /*#__PURE__*/react.css("width:", size, ";height:", size, ";" + ("" )),
39
- viewBox: "0 0 40 40"
40
- }, react.jsx("path", {
41
- css: /*#__PURE__*/react.css("fill:", designSystem.customProperties.colorAccent, ";opacity:0.2;" + ("" )),
42
- d: circlePath
43
- }), react.jsx("path", {
44
- css: /*#__PURE__*/react.css("animation:", spin, " 0.5s infinite linear;fill:", designSystem.customProperties.colorAccent, ";transform-origin:", positionOrigin, " ", positionOrigin, " 0;" + ("" )),
45
- d: pointerPath
46
- }))), props.children && react.jsx(Text__default['default'].Detail, {
47
- tone: "secondary"
48
- }, props.children));
43
+ react$1.useEffect(function () {
44
+ var delaySpinnerTimeout = _setTimeout__default["default"](function () {
45
+ return setShowSpinner(true);
46
+ }, props.maxDelayDuration);
47
+
48
+ return function () {
49
+ return clearTimeout(delaySpinnerTimeout);
50
+ };
51
+ }, [props.maxDelayDuration]);
52
+ if (!showSpinner) return null;
53
+ return jsxRuntime.jsxs(Inline__default["default"], {
54
+ alignItems: "center",
55
+ children: [jsxRuntime.jsx("div", {
56
+ css: /*#__PURE__*/react.css("width:", size, ";height:", size, ";" + ("" ), "" ),
57
+ children: jsxRuntime.jsxs("svg", {
58
+ css: /*#__PURE__*/react.css("width:", size, ";height:", size, ";" + ("" ), "" ),
59
+ viewBox: "0 0 40 40",
60
+ children: [jsxRuntime.jsx("path", {
61
+ css: /*#__PURE__*/react.css("fill:", designSystem.customProperties.colorAccent, ";opacity:0.2;" + ("" ), "" ),
62
+ d: circlePath
63
+ }), jsxRuntime.jsx("path", {
64
+ css: /*#__PURE__*/react.css("animation:", spin, " 0.5s infinite linear;fill:", designSystem.customProperties.colorAccent, ";transform-origin:", positionOrigin, " ", positionOrigin, " 0;" + ("" ), "" ),
65
+ d: pointerPath
66
+ })]
67
+ })
68
+ }), props.children && jsxRuntime.jsx(Text__default["default"].Detail, {
69
+ tone: "secondary",
70
+ children: props.children
71
+ })]
72
+ });
49
73
  };
50
74
 
51
75
  LoadingSpinner.propTypes = {};
@@ -53,8 +77,8 @@ LoadingSpinner.displayName = 'LoadingSpinner';
53
77
  LoadingSpinner.defaultProps = defaultProps;
54
78
  var LoadingSpinner$1 = LoadingSpinner;
55
79
 
56
- // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
57
- var version = '12.2.2';
80
+ // NOTE: This string will be replaced on build time with the package version.
81
+ var version = "12.2.9";
58
82
 
59
- exports['default'] = LoadingSpinner$1;
83
+ exports["default"] = LoadingSpinner$1;
60
84
  exports.version = version;
package/dist/commercetools-uikit-loading-spinner.esm.js CHANGED
@@ -1,10 +1,13 @@
1
+ import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
1
2
  import _taggedTemplateLiteral from '@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral';
2
3
  import _pt from 'prop-types';
3
- import 'react';
4
- import { keyframes, jsx, css } from '@emotion/react';
4
+ import _setTimeout from '@babel/runtime-corejs3/core-js-stable/set-timeout';
5
+ import { useState, useEffect } from 'react';
6
+ import { keyframes, css } from '@emotion/react';
5
7
  import { customProperties } from '@commercetools-uikit/design-system';
6
8
  import Text from '@commercetools-uikit/text';
7
9
  import Inline from '@commercetools-uikit/spacings-inline';
10
+ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
8
11
 
9
12
  var _templateObject;
10
13
  var circlePath = 'M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z';
@@ -16,30 +19,51 @@ var sizePerScale = {
16
19
  };
17
20
  var positionOrigin = '20px';
18
21
  var defaultProps = {
19
- scale: 'l'
22
+ scale: 'l',
23
+ maxDelayDuration: 1000
20
24
  };
21
25
 
22
26
  var LoadingSpinner = function LoadingSpinner(props) {
27
+ var _useState = useState(false),
28
+ _useState2 = _slicedToArray(_useState, 2),
29
+ showSpinner = _useState2[0],
30
+ setShowSpinner = _useState2[1];
31
+
23
32
  var size = sizePerScale[props.scale];
24
- return jsx(Inline, {
25
- alignItems: "center"
26
- }, jsx("div", {
27
- css: /*#__PURE__*/css("width:", size, ";height:", size, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;"))
28
- }, jsx("svg", {
29
- css: /*#__PURE__*/css("width:", size, ";height:", size, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;")),
30
- viewBox: "0 0 40 40"
31
- }, jsx("path", {
32
- css: /*#__PURE__*/css("fill:", customProperties.colorAccent, ";opacity:0.2;" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;")),
33
- d: circlePath
34
- }), jsx("path", {
35
- css: /*#__PURE__*/css("animation:", spin, " 0.5s infinite linear;fill:", customProperties.colorAccent, ";transform-origin:", positionOrigin, " ", positionOrigin, " 0;" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;")),
36
- d: pointerPath
37
- }))), props.children && jsx(Text.Detail, {
38
- tone: "secondary"
39
- }, props.children));
33
+ useEffect(function () {
34
+ var delaySpinnerTimeout = _setTimeout(function () {
35
+ return setShowSpinner(true);
36
+ }, props.maxDelayDuration);
37
+
38
+ return function () {
39
+ return clearTimeout(delaySpinnerTimeout);
40
+ };
41
+ }, [props.maxDelayDuration]);
42
+ if (!showSpinner) return null;
43
+ return jsxs(Inline, {
44
+ alignItems: "center",
45
+ children: [jsx("div", {
46
+ css: /*#__PURE__*/css("width:", size, ";height:", size, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvYWRpbmctc3Bpbm5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0VnQiIsImZpbGUiOiJsb2FkaW5nLXNwaW5uZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlLCB1c2VTdGF0ZSwgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCBUZXh0IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3RleHQnO1xuaW1wb3J0IElubGluZSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1pbmxpbmUnO1xuXG5jb25zdCBjaXJjbGVQYXRoID1cbiAgJ00yMC4yMDEsNS4xNjljLTguMjU0LDAtMTQuOTQ2LDYuNjkyLTE0Ljk0NiwxNC45NDZjMCw4LjI1NSw2LjY5MiwxNC45NDYsMTQuOTQ2LDE0Ljk0NiBzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNGMwLTYuNDI1LDUuMjA5LTExLjYzNCwxMS42MzQtMTEuNjM0YzYuNDI1LDAsMTEuNjMzLDUuMjA5LDExLjYzMywxMS42MzRDMzEuODM0LDI2LjU0MSwyNi42MjYsMzEuNzQ5LDIwLjIwMSwzMS43NDl6JztcbmNvbnN0IHBvaW50ZXJQYXRoID1cbiAgJ00yNi4wMTMsMTAuMDQ3bDEuNjU0LTIuODY2Yy0yLjE5OC0xLjI3Mi00Ljc0My0yLjAxMi03LjQ2Ni0yLjAxMmgwdjMuMzEyaDAgQzIyLjMyLDguNDgxLDI0LjMwMSw5LjA1NywyNi4wMTMsMTAuMDQ3eic7XG5cbmNvbnN0IHNwaW4gPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmA7XG5cbmNvbnN0IHNpemVQZXJTY2FsZSA9IHtcbiAgczogJzE4cHgnLFxuICBsOiAnMzJweCcsXG59O1xuXG5jb25zdCBwb3NpdGlvbk9yaWdpbiA9ICcyMHB4JztcblxudHlwZSBUTG9hZGluZ1NwaW5uZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFNldCB0aGUgYW1vdW50IG9mIHRpbWUgdG8gZGVsYXkgdGhlIGxvYWRpbmcgc3Bpbm5lciBiZWZvcmUgaXQgcmVuZGVycy5cbiAgICogVGhlIGRlZmF1bHQgdmFsdWUgb2YgaXMgMTAwMG1zLlxuICAgKi9cbiAgbWF4RGVsYXlEdXJhdGlvbj86IG51bWJlcjtcbiAgLyoqXG4gICAqIFNldCB0aGUgc2l6ZSBvZiB0aGUgbG9hZGluZyBzcGlubmVyLlxuICAgKi9cbiAgc2NhbGU6ICdzJyB8ICdsJztcbiAgLyoqXG4gICAqIFRoZSBjb250ZW50IHJlbmRlcmVkIGluc2lkZSB0aGUgYExvYWRpbmdTcGlubmVyYC5cbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRMb2FkaW5nU3Bpbm5lclByb3BzLCAnc2NhbGUnIHwgJ21heERlbGF5RHVyYXRpb24nPiA9IHtcbiAgc2NhbGU6ICdsJyxcbiAgbWF4RGVsYXlEdXJhdGlvbjogMTAwMCxcbn07XG5cbmNvbnN0IExvYWRpbmdTcGlubmVyID0gKHByb3BzOiBUTG9hZGluZ1NwaW5uZXJQcm9wcykgPT4ge1xuICBjb25zdCBbc2hvd1NwaW5uZXIsIHNldFNob3dTcGlubmVyXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3Qgc2l6ZSA9IHNpemVQZXJTY2FsZVtwcm9wcy5zY2FsZV07XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgZGVsYXlTcGlubmVyVGltZW91dCA9IHNldFRpbWVvdXQoXG4gICAgICAoKSA9PiBzZXRTaG93U3Bpbm5lcih0cnVlKSxcbiAgICAgIHByb3BzLm1heERlbGF5RHVyYXRpb25cbiAgICApO1xuXG4gICAgcmV0dXJuICgpID0+IGNsZWFyVGltZW91dChkZWxheVNwaW5uZXJUaW1lb3V0KTtcbiAgfSwgW3Byb3BzLm1heERlbGF5RHVyYXRpb25dKTtcblxuICBpZiAoIXNob3dTcGlubmVyKSByZXR1cm4gbnVsbDtcblxuICByZXR1cm4gKFxuICAgIDxJbmxpbmUgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICB3aWR0aDogJHtzaXplfTtcbiAgICAgICAgICBoZWlnaHQ6ICR7c2l6ZX07XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxzdmdcbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHdpZHRoOiAke3NpemV9O1xuICAgICAgICAgICAgaGVpZ2h0OiAke3NpemV9O1xuICAgICAgICAgIGB9XG4gICAgICAgICAgdmlld0JveD1cIjAgMCA0MCA0MFwiXG4gICAgICAgID5cbiAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIG9wYWNpdHk6IDAuMjtcbiAgICAgICAgICAgIGB9XG4gICAgICAgICAgICBkPXtjaXJjbGVQYXRofVxuICAgICAgICAgIC8+XG4gICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICBhbmltYXRpb246ICR7c3Bpbn0gMC41cyBpbmZpbml0ZSBsaW5lYXI7XG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIHRyYW5zZm9ybS1vcmlnaW46ICR7cG9zaXRpb25PcmlnaW59ICR7cG9zaXRpb25PcmlnaW59IDA7XG4gICAgICAgICAgICBgfVxuICAgICAgICAgICAgZD17cG9pbnRlclBhdGh9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICA8L2Rpdj5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbiAmJiAoXG4gICAgICAgIDxUZXh0LkRldGFpbCB0b25lPVwic2Vjb25kYXJ5XCI+e3Byb3BzLmNoaWxkcmVufTwvVGV4dC5EZXRhaWw+XG4gICAgICApfVxuICAgIDwvSW5saW5lPlxuICApO1xufTtcbkxvYWRpbmdTcGlubmVyLmRpc3BsYXlOYW1lID0gJ0xvYWRpbmdTcGlubmVyJztcbkxvYWRpbmdTcGlubmVyLmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgTG9hZGluZ1NwaW5uZXI7XG4iXX0= */"),
47
+ children: jsxs("svg", {
48
+ css: /*#__PURE__*/css("width:", size, ";height:", size, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvYWRpbmctc3Bpbm5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0VrQiIsImZpbGUiOiJsb2FkaW5nLXNwaW5uZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlLCB1c2VTdGF0ZSwgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCBUZXh0IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3RleHQnO1xuaW1wb3J0IElubGluZSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1pbmxpbmUnO1xuXG5jb25zdCBjaXJjbGVQYXRoID1cbiAgJ00yMC4yMDEsNS4xNjljLTguMjU0LDAtMTQuOTQ2LDYuNjkyLTE0Ljk0NiwxNC45NDZjMCw4LjI1NSw2LjY5MiwxNC45NDYsMTQuOTQ2LDE0Ljk0NiBzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNGMwLTYuNDI1LDUuMjA5LTExLjYzNCwxMS42MzQtMTEuNjM0YzYuNDI1LDAsMTEuNjMzLDUuMjA5LDExLjYzMywxMS42MzRDMzEuODM0LDI2LjU0MSwyNi42MjYsMzEuNzQ5LDIwLjIwMSwzMS43NDl6JztcbmNvbnN0IHBvaW50ZXJQYXRoID1cbiAgJ00yNi4wMTMsMTAuMDQ3bDEuNjU0LTIuODY2Yy0yLjE5OC0xLjI3Mi00Ljc0My0yLjAxMi03LjQ2Ni0yLjAxMmgwdjMuMzEyaDAgQzIyLjMyLDguNDgxLDI0LjMwMSw5LjA1NywyNi4wMTMsMTAuMDQ3eic7XG5cbmNvbnN0IHNwaW4gPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmA7XG5cbmNvbnN0IHNpemVQZXJTY2FsZSA9IHtcbiAgczogJzE4cHgnLFxuICBsOiAnMzJweCcsXG59O1xuXG5jb25zdCBwb3NpdGlvbk9yaWdpbiA9ICcyMHB4JztcblxudHlwZSBUTG9hZGluZ1NwaW5uZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFNldCB0aGUgYW1vdW50IG9mIHRpbWUgdG8gZGVsYXkgdGhlIGxvYWRpbmcgc3Bpbm5lciBiZWZvcmUgaXQgcmVuZGVycy5cbiAgICogVGhlIGRlZmF1bHQgdmFsdWUgb2YgaXMgMTAwMG1zLlxuICAgKi9cbiAgbWF4RGVsYXlEdXJhdGlvbj86IG51bWJlcjtcbiAgLyoqXG4gICAqIFNldCB0aGUgc2l6ZSBvZiB0aGUgbG9hZGluZyBzcGlubmVyLlxuICAgKi9cbiAgc2NhbGU6ICdzJyB8ICdsJztcbiAgLyoqXG4gICAqIFRoZSBjb250ZW50IHJlbmRlcmVkIGluc2lkZSB0aGUgYExvYWRpbmdTcGlubmVyYC5cbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRMb2FkaW5nU3Bpbm5lclByb3BzLCAnc2NhbGUnIHwgJ21heERlbGF5RHVyYXRpb24nPiA9IHtcbiAgc2NhbGU6ICdsJyxcbiAgbWF4RGVsYXlEdXJhdGlvbjogMTAwMCxcbn07XG5cbmNvbnN0IExvYWRpbmdTcGlubmVyID0gKHByb3BzOiBUTG9hZGluZ1NwaW5uZXJQcm9wcykgPT4ge1xuICBjb25zdCBbc2hvd1NwaW5uZXIsIHNldFNob3dTcGlubmVyXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3Qgc2l6ZSA9IHNpemVQZXJTY2FsZVtwcm9wcy5zY2FsZV07XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgZGVsYXlTcGlubmVyVGltZW91dCA9IHNldFRpbWVvdXQoXG4gICAgICAoKSA9PiBzZXRTaG93U3Bpbm5lcih0cnVlKSxcbiAgICAgIHByb3BzLm1heERlbGF5RHVyYXRpb25cbiAgICApO1xuXG4gICAgcmV0dXJuICgpID0+IGNsZWFyVGltZW91dChkZWxheVNwaW5uZXJUaW1lb3V0KTtcbiAgfSwgW3Byb3BzLm1heERlbGF5RHVyYXRpb25dKTtcblxuICBpZiAoIXNob3dTcGlubmVyKSByZXR1cm4gbnVsbDtcblxuICByZXR1cm4gKFxuICAgIDxJbmxpbmUgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICB3aWR0aDogJHtzaXplfTtcbiAgICAgICAgICBoZWlnaHQ6ICR7c2l6ZX07XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxzdmdcbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHdpZHRoOiAke3NpemV9O1xuICAgICAgICAgICAgaGVpZ2h0OiAke3NpemV9O1xuICAgICAgICAgIGB9XG4gICAgICAgICAgdmlld0JveD1cIjAgMCA0MCA0MFwiXG4gICAgICAgID5cbiAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIG9wYWNpdHk6IDAuMjtcbiAgICAgICAgICAgIGB9XG4gICAgICAgICAgICBkPXtjaXJjbGVQYXRofVxuICAgICAgICAgIC8+XG4gICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICBhbmltYXRpb246ICR7c3Bpbn0gMC41cyBpbmZpbml0ZSBsaW5lYXI7XG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIHRyYW5zZm9ybS1vcmlnaW46ICR7cG9zaXRpb25PcmlnaW59ICR7cG9zaXRpb25PcmlnaW59IDA7XG4gICAgICAgICAgICBgfVxuICAgICAgICAgICAgZD17cG9pbnRlclBhdGh9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICA8L2Rpdj5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbiAmJiAoXG4gICAgICAgIDxUZXh0LkRldGFpbCB0b25lPVwic2Vjb25kYXJ5XCI+e3Byb3BzLmNoaWxkcmVufTwvVGV4dC5EZXRhaWw+XG4gICAgICApfVxuICAgIDwvSW5saW5lPlxuICApO1xufTtcbkxvYWRpbmdTcGlubmVyLmRpc3BsYXlOYW1lID0gJ0xvYWRpbmdTcGlubmVyJztcbkxvYWRpbmdTcGlubmVyLmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgTG9hZGluZ1NwaW5uZXI7XG4iXX0= */"),
49
+ viewBox: "0 0 40 40",
50
+ children: [jsx("path", {
51
+ css: /*#__PURE__*/css("fill:", customProperties.colorAccent, ";opacity:0.2;" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvYWRpbmctc3Bpbm5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0VvQiIsImZpbGUiOiJsb2FkaW5nLXNwaW5uZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlLCB1c2VTdGF0ZSwgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCBUZXh0IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3RleHQnO1xuaW1wb3J0IElubGluZSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1pbmxpbmUnO1xuXG5jb25zdCBjaXJjbGVQYXRoID1cbiAgJ00yMC4yMDEsNS4xNjljLTguMjU0LDAtMTQuOTQ2LDYuNjkyLTE0Ljk0NiwxNC45NDZjMCw4LjI1NSw2LjY5MiwxNC45NDYsMTQuOTQ2LDE0Ljk0NiBzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNGMwLTYuNDI1LDUuMjA5LTExLjYzNCwxMS42MzQtMTEuNjM0YzYuNDI1LDAsMTEuNjMzLDUuMjA5LDExLjYzMywxMS42MzRDMzEuODM0LDI2LjU0MSwyNi42MjYsMzEuNzQ5LDIwLjIwMSwzMS43NDl6JztcbmNvbnN0IHBvaW50ZXJQYXRoID1cbiAgJ00yNi4wMTMsMTAuMDQ3bDEuNjU0LTIuODY2Yy0yLjE5OC0xLjI3Mi00Ljc0My0yLjAxMi03LjQ2Ni0yLjAxMmgwdjMuMzEyaDAgQzIyLjMyLDguNDgxLDI0LjMwMSw5LjA1NywyNi4wMTMsMTAuMDQ3eic7XG5cbmNvbnN0IHNwaW4gPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmA7XG5cbmNvbnN0IHNpemVQZXJTY2FsZSA9IHtcbiAgczogJzE4cHgnLFxuICBsOiAnMzJweCcsXG59O1xuXG5jb25zdCBwb3NpdGlvbk9yaWdpbiA9ICcyMHB4JztcblxudHlwZSBUTG9hZGluZ1NwaW5uZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFNldCB0aGUgYW1vdW50IG9mIHRpbWUgdG8gZGVsYXkgdGhlIGxvYWRpbmcgc3Bpbm5lciBiZWZvcmUgaXQgcmVuZGVycy5cbiAgICogVGhlIGRlZmF1bHQgdmFsdWUgb2YgaXMgMTAwMG1zLlxuICAgKi9cbiAgbWF4RGVsYXlEdXJhdGlvbj86IG51bWJlcjtcbiAgLyoqXG4gICAqIFNldCB0aGUgc2l6ZSBvZiB0aGUgbG9hZGluZyBzcGlubmVyLlxuICAgKi9cbiAgc2NhbGU6ICdzJyB8ICdsJztcbiAgLyoqXG4gICAqIFRoZSBjb250ZW50IHJlbmRlcmVkIGluc2lkZSB0aGUgYExvYWRpbmdTcGlubmVyYC5cbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRMb2FkaW5nU3Bpbm5lclByb3BzLCAnc2NhbGUnIHwgJ21heERlbGF5RHVyYXRpb24nPiA9IHtcbiAgc2NhbGU6ICdsJyxcbiAgbWF4RGVsYXlEdXJhdGlvbjogMTAwMCxcbn07XG5cbmNvbnN0IExvYWRpbmdTcGlubmVyID0gKHByb3BzOiBUTG9hZGluZ1NwaW5uZXJQcm9wcykgPT4ge1xuICBjb25zdCBbc2hvd1NwaW5uZXIsIHNldFNob3dTcGlubmVyXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3Qgc2l6ZSA9IHNpemVQZXJTY2FsZVtwcm9wcy5zY2FsZV07XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgZGVsYXlTcGlubmVyVGltZW91dCA9IHNldFRpbWVvdXQoXG4gICAgICAoKSA9PiBzZXRTaG93U3Bpbm5lcih0cnVlKSxcbiAgICAgIHByb3BzLm1heERlbGF5RHVyYXRpb25cbiAgICApO1xuXG4gICAgcmV0dXJuICgpID0+IGNsZWFyVGltZW91dChkZWxheVNwaW5uZXJUaW1lb3V0KTtcbiAgfSwgW3Byb3BzLm1heERlbGF5RHVyYXRpb25dKTtcblxuICBpZiAoIXNob3dTcGlubmVyKSByZXR1cm4gbnVsbDtcblxuICByZXR1cm4gKFxuICAgIDxJbmxpbmUgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICB3aWR0aDogJHtzaXplfTtcbiAgICAgICAgICBoZWlnaHQ6ICR7c2l6ZX07XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxzdmdcbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHdpZHRoOiAke3NpemV9O1xuICAgICAgICAgICAgaGVpZ2h0OiAke3NpemV9O1xuICAgICAgICAgIGB9XG4gICAgICAgICAgdmlld0JveD1cIjAgMCA0MCA0MFwiXG4gICAgICAgID5cbiAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIG9wYWNpdHk6IDAuMjtcbiAgICAgICAgICAgIGB9XG4gICAgICAgICAgICBkPXtjaXJjbGVQYXRofVxuICAgICAgICAgIC8+XG4gICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICBhbmltYXRpb246ICR7c3Bpbn0gMC41cyBpbmZpbml0ZSBsaW5lYXI7XG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIHRyYW5zZm9ybS1vcmlnaW46ICR7cG9zaXRpb25PcmlnaW59ICR7cG9zaXRpb25PcmlnaW59IDA7XG4gICAgICAgICAgICBgfVxuICAgICAgICAgICAgZD17cG9pbnRlclBhdGh9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICA8L2Rpdj5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbiAmJiAoXG4gICAgICAgIDxUZXh0LkRldGFpbCB0b25lPVwic2Vjb25kYXJ5XCI+e3Byb3BzLmNoaWxkcmVufTwvVGV4dC5EZXRhaWw+XG4gICAgICApfVxuICAgIDwvSW5saW5lPlxuICApO1xufTtcbkxvYWRpbmdTcGlubmVyLmRpc3BsYXlOYW1lID0gJ0xvYWRpbmdTcGlubmVyJztcbkxvYWRpbmdTcGlubmVyLmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgTG9hZGluZ1NwaW5uZXI7XG4iXX0= */"),
52
+ d: circlePath
53
+ }), jsx("path", {
54
+ css: /*#__PURE__*/css("animation:", spin, " 0.5s infinite linear;fill:", customProperties.colorAccent, ";transform-origin:", positionOrigin, " ", positionOrigin, " 0;" + (process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvYWRpbmctc3Bpbm5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0ZvQiIsImZpbGUiOiJsb2FkaW5nLXNwaW5uZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlLCB1c2VTdGF0ZSwgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBjdXN0b21Qcm9wZXJ0aWVzIGFzIHZhcnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCBUZXh0IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3RleHQnO1xuaW1wb3J0IElubGluZSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1pbmxpbmUnO1xuXG5jb25zdCBjaXJjbGVQYXRoID1cbiAgJ00yMC4yMDEsNS4xNjljLTguMjU0LDAtMTQuOTQ2LDYuNjkyLTE0Ljk0NiwxNC45NDZjMCw4LjI1NSw2LjY5MiwxNC45NDYsMTQuOTQ2LDE0Ljk0NiBzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNGMwLTYuNDI1LDUuMjA5LTExLjYzNCwxMS42MzQtMTEuNjM0YzYuNDI1LDAsMTEuNjMzLDUuMjA5LDExLjYzMywxMS42MzRDMzEuODM0LDI2LjU0MSwyNi42MjYsMzEuNzQ5LDIwLjIwMSwzMS43NDl6JztcbmNvbnN0IHBvaW50ZXJQYXRoID1cbiAgJ00yNi4wMTMsMTAuMDQ3bDEuNjU0LTIuODY2Yy0yLjE5OC0xLjI3Mi00Ljc0My0yLjAxMi03LjQ2Ni0yLjAxMmgwdjMuMzEyaDAgQzIyLjMyLDguNDgxLDI0LjMwMSw5LjA1NywyNi4wMTMsMTAuMDQ3eic7XG5cbmNvbnN0IHNwaW4gPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmA7XG5cbmNvbnN0IHNpemVQZXJTY2FsZSA9IHtcbiAgczogJzE4cHgnLFxuICBsOiAnMzJweCcsXG59O1xuXG5jb25zdCBwb3NpdGlvbk9yaWdpbiA9ICcyMHB4JztcblxudHlwZSBUTG9hZGluZ1NwaW5uZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFNldCB0aGUgYW1vdW50IG9mIHRpbWUgdG8gZGVsYXkgdGhlIGxvYWRpbmcgc3Bpbm5lciBiZWZvcmUgaXQgcmVuZGVycy5cbiAgICogVGhlIGRlZmF1bHQgdmFsdWUgb2YgaXMgMTAwMG1zLlxuICAgKi9cbiAgbWF4RGVsYXlEdXJhdGlvbj86IG51bWJlcjtcbiAgLyoqXG4gICAqIFNldCB0aGUgc2l6ZSBvZiB0aGUgbG9hZGluZyBzcGlubmVyLlxuICAgKi9cbiAgc2NhbGU6ICdzJyB8ICdsJztcbiAgLyoqXG4gICAqIFRoZSBjb250ZW50IHJlbmRlcmVkIGluc2lkZSB0aGUgYExvYWRpbmdTcGlubmVyYC5cbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRMb2FkaW5nU3Bpbm5lclByb3BzLCAnc2NhbGUnIHwgJ21heERlbGF5RHVyYXRpb24nPiA9IHtcbiAgc2NhbGU6ICdsJyxcbiAgbWF4RGVsYXlEdXJhdGlvbjogMTAwMCxcbn07XG5cbmNvbnN0IExvYWRpbmdTcGlubmVyID0gKHByb3BzOiBUTG9hZGluZ1NwaW5uZXJQcm9wcykgPT4ge1xuICBjb25zdCBbc2hvd1NwaW5uZXIsIHNldFNob3dTcGlubmVyXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3Qgc2l6ZSA9IHNpemVQZXJTY2FsZVtwcm9wcy5zY2FsZV07XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgZGVsYXlTcGlubmVyVGltZW91dCA9IHNldFRpbWVvdXQoXG4gICAgICAoKSA9PiBzZXRTaG93U3Bpbm5lcih0cnVlKSxcbiAgICAgIHByb3BzLm1heERlbGF5RHVyYXRpb25cbiAgICApO1xuXG4gICAgcmV0dXJuICgpID0+IGNsZWFyVGltZW91dChkZWxheVNwaW5uZXJUaW1lb3V0KTtcbiAgfSwgW3Byb3BzLm1heERlbGF5RHVyYXRpb25dKTtcblxuICBpZiAoIXNob3dTcGlubmVyKSByZXR1cm4gbnVsbDtcblxuICByZXR1cm4gKFxuICAgIDxJbmxpbmUgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICB3aWR0aDogJHtzaXplfTtcbiAgICAgICAgICBoZWlnaHQ6ICR7c2l6ZX07XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxzdmdcbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHdpZHRoOiAke3NpemV9O1xuICAgICAgICAgICAgaGVpZ2h0OiAke3NpemV9O1xuICAgICAgICAgIGB9XG4gICAgICAgICAgdmlld0JveD1cIjAgMCA0MCA0MFwiXG4gICAgICAgID5cbiAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIG9wYWNpdHk6IDAuMjtcbiAgICAgICAgICAgIGB9XG4gICAgICAgICAgICBkPXtjaXJjbGVQYXRofVxuICAgICAgICAgIC8+XG4gICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICBhbmltYXRpb246ICR7c3Bpbn0gMC41cyBpbmZpbml0ZSBsaW5lYXI7XG4gICAgICAgICAgICAgIGZpbGw6ICR7dmFycy5jb2xvckFjY2VudH07XG4gICAgICAgICAgICAgIHRyYW5zZm9ybS1vcmlnaW46ICR7cG9zaXRpb25PcmlnaW59ICR7cG9zaXRpb25PcmlnaW59IDA7XG4gICAgICAgICAgICBgfVxuICAgICAgICAgICAgZD17cG9pbnRlclBhdGh9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICA8L2Rpdj5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbiAmJiAoXG4gICAgICAgIDxUZXh0LkRldGFpbCB0b25lPVwic2Vjb25kYXJ5XCI+e3Byb3BzLmNoaWxkcmVufTwvVGV4dC5EZXRhaWw+XG4gICAgICApfVxuICAgIDwvSW5saW5lPlxuICApO1xufTtcbkxvYWRpbmdTcGlubmVyLmRpc3BsYXlOYW1lID0gJ0xvYWRpbmdTcGlubmVyJztcbkxvYWRpbmdTcGlubmVyLmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgTG9hZGluZ1NwaW5uZXI7XG4iXX0= */"),
55
+ d: pointerPath
56
+ })]
57
+ })
58
+ }), props.children && jsx(Text.Detail, {
59
+ tone: "secondary",
60
+ children: props.children
61
+ })]
62
+ });
40
63
  };
41
64
 
42
65
  LoadingSpinner.propTypes = process.env.NODE_ENV !== "production" ? {
66
+ maxDelayDuration: _pt.number,
43
67
  scale: _pt.oneOf(['s', 'l']).isRequired,
44
68
  children: _pt.node
45
69
  } : {};
@@ -47,7 +71,7 @@ LoadingSpinner.displayName = 'LoadingSpinner';
47
71
  LoadingSpinner.defaultProps = defaultProps;
48
72
  var LoadingSpinner$1 = LoadingSpinner;
49
73
 
50
- // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
51
- var version = '12.2.2';
74
+ // NOTE: This string will be replaced on build time with the package version.
75
+ var version = "12.2.9";
52
76
 
53
77
  export { LoadingSpinner$1 as default, version };
package/dist/declarations/src/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export { default } from './loading-spinner';
2
- export { default as version } from './version';
1
+ export { default } from './loading-spinner';
2
+ export { default as version } from './version';
package/dist/declarations/src/loading-spinner.d.ts CHANGED
@@ -1,11 +1,12 @@
1
- import React from 'react';
2
- declare type TLoadingSpinnerProps = {
3
- scale: 's' | 'l';
4
- children?: React.ReactNode;
5
- };
6
- declare const LoadingSpinner: {
7
- (props: TLoadingSpinnerProps): JSX.Element;
8
- displayName: string;
9
- defaultProps: Pick<TLoadingSpinnerProps, "scale">;
10
- };
11
- export default LoadingSpinner;
1
+ import { ReactNode } from 'react';
2
+ declare type TLoadingSpinnerProps = {
3
+ maxDelayDuration?: number;
4
+ scale: 's' | 'l';
5
+ children?: ReactNode;
6
+ };
7
+ declare const LoadingSpinner: {
8
+ (props: TLoadingSpinnerProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
9
+ displayName: string;
10
+ defaultProps: Pick<TLoadingSpinnerProps, "scale" | "maxDelayDuration">;
11
+ };
12
+ export default LoadingSpinner;
package/dist/declarations/src/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: "12.2.2";
2
- export default _default;
1
+ declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
2
+ export default _default;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/loading-spinner",
3
3
  "description": "A spinner animation to indicate loading state (e.g pending requests) for the user.",
4
- "version": "12.2.2",
4
+ "version": "12.2.9",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -11,7 +11,6 @@
11
11
  "homepage": "https://uikit.commercetools.com",
12
12
  "keywords": ["javascript", "design system", "react", "uikit"],
13
13
  "license": "MIT",
14
- "private": false,
15
14
  "publishConfig": {
16
15
  "access": "public"
17
16
  },
@@ -19,16 +18,13 @@
19
18
  "main": "dist/commercetools-uikit-loading-spinner.cjs.js",
20
19
  "module": "dist/commercetools-uikit-loading-spinner.esm.js",
21
20
  "files": ["dist"],
22
- "scripts": {
23
- "prepare": "../../../scripts/version.js replace"
24
- },
25
21
  "dependencies": {
26
- "@babel/runtime": "7.14.8",
27
- "@babel/runtime-corejs3": "7.14.8",
28
- "@commercetools-uikit/design-system": "12.2.2",
29
- "@commercetools-uikit/spacings-inline": "12.2.2",
30
- "@commercetools-uikit/text": "12.2.2",
31
- "@commercetools-uikit/utils": "12.2.0",
22
+ "@babel/runtime": "7.16.5",
23
+ "@babel/runtime-corejs3": "7.16.5",
24
+ "@commercetools-uikit/design-system": "12.2.9",
25
+ "@commercetools-uikit/spacings-inline": "12.2.9",
26
+ "@commercetools-uikit/text": "12.2.9",
27
+ "@commercetools-uikit/utils": "12.2.9",
32
28
  "@emotion/react": "^11.4.0",
33
29
  "prop-types": "15.7.2"
34
30
  },