@hortiview/shared-components 2.26.3 → 2.27.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [2.27.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.26.3...v2.27.0) (2026-05-26)
+
+### Features
+
+* adjust LoadingSpinner for subtext display ([474e6c9](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/474e6c952ba63f53b1fc49edebe33d8aa3535e6e)), closes [#19809](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/issues/19809)
+
 ## [2.26.3](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.26.2...v2.26.3) (2026-05-26)
 
 ### Code Refactoring

package/dist/components/LoadingSpinner/Big/BigLoadingSpinner.d.ts

@@ -1,5 +1,6 @@
 type BigLoadingSpinnerProps = {
     text?: string;
+    subText?: string;
 };
 export declare const BigLoadingSpinner: (props: BigLoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LoadingSpinner/Big/BigLoadingSpinner.js

@@ -1,15 +1,26 @@
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { T as r } from "../../../index.es-EXzC8zuP.js";
-import { Iconify as d } from "../../Iconify/Iconify.js";
-import '../../../assets/BigLoadingSpinner.css';const e = "_loadingBigOverlay_7dxo1_1", g = "_bigLoadSpinnerCard_7dxo1_12", t = "_bigLoadSpinnerCardText_7dxo1_27", s = "_logo_7dxo1_33", o = {
-  loadingBigOverlay: e,
-  bigLoadSpinnerCard: g,
-  bigLoadSpinnerCardText: t,
-  logo: s
-}, l = ({ text: n }) => /* @__PURE__ */ a("div", { className: o.bigLoadSpinnerCard, role: "progressbar", "data-testid": "loading-spinner", children: [
-  /* @__PURE__ */ i(d, { icon: "hortiview", className: o.logo, "data-testid": "logo-icon" }),
-  /* @__PURE__ */ i(r, { tag: "p", bold: !0, level: 1, className: o.bigLoadSpinnerCardText, children: n })
-] }), b = (n) => /* @__PURE__ */ i("div", { "data-testid": "big-loading-spinner", className: o.loadingBigOverlay, children: /* @__PURE__ */ i(l, { ...n }) });
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { T as r, c as e } from "../../../index.es-EXzC8zuP.js";
+import { Iconify as t } from "../../Iconify/Iconify.js";
+import { P as g } from "../../../index.es-C8AExypY.js";
+import '../../../assets/BigLoadingSpinner.css';const s = "_loadingBigOverlay_7dxo1_1", l = "_bigLoadSpinnerCard_7dxo1_12", c = "_bigLoadSpinnerCardText_7dxo1_27", p = "_logo_7dxo1_33", i = {
+  loadingBigOverlay: s,
+  bigLoadSpinnerCard: l,
+  bigLoadSpinnerCardText: c,
+  logo: p
+}, m = ({ text: a, subText: n }) => /* @__PURE__ */ d("div", { className: i.bigLoadSpinnerCard, role: "progressbar", "data-testid": "loading-spinner", children: [
+  /* @__PURE__ */ o(t, { icon: "hortiview", className: i.logo, "data-testid": "logo-icon" }),
+  /* @__PURE__ */ o(r, { bold: !0, tag: "p", level: 1, className: i.bigLoadSpinnerCardText, children: a }),
+  n && /* @__PURE__ */ o(g, { customPadding: "0 0 1rem 0", children: /* @__PURE__ */ o(
+    e,
+    {
+      tag: "p",
+      "data-testid": "loading-subText",
+      themeColor: "text-secondary-on-background",
+      className: i.bigLoadSpinnerCardText,
+      children: n
+    }
+  ) })
+] }), C = (a) => /* @__PURE__ */ o("div", { "data-testid": "big-loading-spinner", className: i.loadingBigOverlay, children: /* @__PURE__ */ o(m, { ...a }) });
 export {
-  b as BigLoadingSpinner
+  C as BigLoadingSpinner
 };

package/dist/components/LoadingSpinner/Default/LoadingSpinner.d.ts

@@ -7,6 +7,10 @@ export type LoadingSpinnerProps = {
      * text to show below the spinner
      */
     text?: string;
+    /**
+     * Additional text to show below the main text
+     */
+    subText?: string;
     /**
      * defines size of the spinner, excluding the 'big' size which will render a special spinner with the hortiview logo
      */
@@ -29,15 +33,17 @@ export type LoadingSpinnerProps = {
     impatienceMessage?: string | null;
     /**
      * time in seconds to show the impatience message
+     * @remarks To disable the impatience message, set this to 'disabled'
      */
-    impatienceTimeout?: number;
+    impatienceTimeout?: number | 'disabled';
 };
 /**
  * A loading spinner component that can be used to show loading state in the application.
  * @param size size of the spinner itself (sm, md, lg, big)
- * @attention `'big'` will render a full screen loading spinner with the hortiview logo, other props will be ignored
+ * @attention `'big'` will render a full screen loading spinner with the hortiview logo, with an adjusted layout and input blocking
  * @param center center the spinner in the middle of the container
  * @param text text to show below the spinner
+ * @param subText Additional text to show below the main text
  * @param textPosition position of the text relative to the spinner (bottom, right)
  * @param color color of the spinner (primary, secondary)
  * @param spinnerOnly render only the spinner without any text
@@ -48,4 +54,4 @@ export type LoadingSpinnerProps = {
  * @example <LoadingSpinner size='md' center color='primary' spinnerOnly={true} />
  * @returns a loading spinner component
  */
-export declare const LoadingSpinner: ({ size, center, text, textPosition, color, spinnerOnly, impatienceMessage, impatienceTimeout, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingSpinner: ({ size, center, text, subText, textPosition, color, spinnerOnly, impatienceMessage, impatienceTimeout, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/LoadingSpinner/Default/LoadingSpinner.js

@@ -1,17 +1,17 @@
-import { jsx as y, jsxs as Q } from "react/jsx-runtime";
-import { _ as X, a as Y, c as $, P as u } from "../../../index-_-9ybP20.js";
+import { jsx as C, jsxs as Q } from "react/jsx-runtime";
+import { _ as X, a as Y, c as H, P as m } from "../../../index-_-9ybP20.js";
 import { i as Z, _ as w, d as ee } from "../../../index.es-DRC-9PLs.js";
-import t, { forwardRef as re, useRef as H, useImperativeHandle as te, useEffect as T, useCallback as se, useState as ae, useMemo as ie } from "react";
+import t, { forwardRef as re, useRef as R, useImperativeHandle as te, useEffect as T, useCallback as se, useState as ae, useMemo as ie } from "react";
 import { b as q, c as U } from "../../../tslib.es6-BDCynO9F.js";
 import { M as oe, a as ne } from "../../../component-By6nyiBU.js";
 import { G as ce } from "../../../index.es-BE1XL1dD.js";
 import { P as le } from "../../../index.es-C8AExypY.js";
-import { T as de } from "../../../index.es-EXzC8zuP.js";
-import { BigLoadingSpinner as ue } from "../Big/BigLoadingSpinner.js";
-import '../../../assets/LoadingSpinner.css';var p = {
+import { T as de, c as ue } from "../../../index.es-EXzC8zuP.js";
+import { BigLoadingSpinner as me } from "../Big/BigLoadingSpinner.js";
+import '../../../assets/LoadingSpinner.css';var g = {
   INDETERMINATE_CLASS: "mdc-circular-progress--indeterminate",
   CLOSED_CLASS: "mdc-circular-progress--closed"
-}, m = {
+}, h = {
   ARIA_HIDDEN: "aria-hidden",
   ARIA_VALUENOW: "aria-valuenow",
   DETERMINATE_CIRCLE_SELECTOR: ".mdc-circular-progress__determinate-circle",
@@ -27,13 +27,13 @@ var V = (
     }
     return Object.defineProperty(e, "cssClasses", {
       get: function() {
-        return p;
+        return g;
       },
       enumerable: !1,
       configurable: !0
     }), Object.defineProperty(e, "strings", {
       get: function() {
-        return m;
+        return h;
       },
       enumerable: !1,
       configurable: !0
@@ -61,28 +61,28 @@ var V = (
       enumerable: !1,
       configurable: !0
     }), e.prototype.init = function() {
-      this.closed = this.adapter.hasClass(p.CLOSED_CLASS), this.determinate = !this.adapter.hasClass(p.INDETERMINATE_CLASS), this.progress = 0, this.determinate && this.adapter.setAttribute(m.ARIA_VALUENOW, this.progress.toString()), this.radius = Number(this.adapter.getDeterminateCircleAttribute(m.RADIUS));
+      this.closed = this.adapter.hasClass(g.CLOSED_CLASS), this.determinate = !this.adapter.hasClass(g.INDETERMINATE_CLASS), this.progress = 0, this.determinate && this.adapter.setAttribute(h.ARIA_VALUENOW, this.progress.toString()), this.radius = Number(this.adapter.getDeterminateCircleAttribute(h.RADIUS));
     }, e.prototype.setDeterminate = function(r) {
-      this.determinate = r, this.determinate ? (this.adapter.removeClass(p.INDETERMINATE_CLASS), this.setProgress(this.progress)) : (this.adapter.addClass(p.INDETERMINATE_CLASS), this.adapter.removeAttribute(m.ARIA_VALUENOW));
+      this.determinate = r, this.determinate ? (this.adapter.removeClass(g.INDETERMINATE_CLASS), this.setProgress(this.progress)) : (this.adapter.addClass(g.INDETERMINATE_CLASS), this.adapter.removeAttribute(h.ARIA_VALUENOW));
     }, e.prototype.isDeterminate = function() {
       return this.determinate;
     }, e.prototype.setProgress = function(r) {
       if (this.progress = r, this.determinate) {
-        var c = (1 - this.progress) * (2 * Math.PI * this.radius);
-        this.adapter.setDeterminateCircleAttribute(m.STROKE_DASHOFFSET, "" + c), this.adapter.setAttribute(m.ARIA_VALUENOW, this.progress.toString());
+        var o = (1 - this.progress) * (2 * Math.PI * this.radius);
+        this.adapter.setDeterminateCircleAttribute(h.STROKE_DASHOFFSET, "" + o), this.adapter.setAttribute(h.ARIA_VALUENOW, this.progress.toString());
       }
     }, e.prototype.getProgress = function() {
       return this.progress;
     }, e.prototype.open = function() {
-      this.closed = !1, this.adapter.removeClass(p.CLOSED_CLASS), this.adapter.removeAttribute(m.ARIA_HIDDEN);
+      this.closed = !1, this.adapter.removeClass(g.CLOSED_CLASS), this.adapter.removeAttribute(h.ARIA_HIDDEN);
     }, e.prototype.close = function() {
-      this.closed = !0, this.adapter.addClass(p.CLOSED_CLASS), this.adapter.setAttribute(m.ARIA_HIDDEN, "true");
+      this.closed = !0, this.adapter.addClass(g.CLOSED_CLASS), this.adapter.setAttribute(h.ARIA_HIDDEN, "true");
     }, e.prototype.isClosed = function() {
       return this.closed;
     }, e;
   })(oe)
 );
-var me = (
+var he = (
   /** @class */
   (function(s) {
     q(e, s);
@@ -129,7 +129,7 @@ var me = (
     }, e.prototype.close = function() {
       this.foundation.close();
     }, e.prototype.getDefaultFoundation = function() {
-      var r = this, c = {
+      var r = this, o = {
         addClass: function(a) {
           return r.root.classList.add(a);
         },
@@ -145,14 +145,14 @@ var me = (
         removeAttribute: function(a) {
           return r.root.removeAttribute(a);
         },
-        setAttribute: function(a, l) {
-          return r.root.setAttribute(a, l);
+        setAttribute: function(a, n) {
+          return r.root.setAttribute(a, n);
         },
-        setDeterminateCircleAttribute: function(a, l) {
-          return r.determinateCircle_.setAttribute(a, l);
+        setDeterminateCircleAttribute: function(a, n) {
+          return r.determinateCircle_.setAttribute(a, n);
         }
       };
-      return new V(c);
+      return new V(o);
     }, e;
   })(ne)
 ), pe = {
@@ -161,31 +161,31 @@ var me = (
    *
    * Defaults to **'Progress Indicator'**.
    */
-  ariaLabel: u.string,
+  ariaLabel: m.string,
   /**
    * The css class name to be passed through to the component markup.
    *
    * Defaults to **undefined**.
    */
-  className: u.string,
+  className: m.string,
   /**
    * The size of the progress indicator.
    *
    * Defaults to **'lg'**.
    */
-  indicatorSize: u.oneOf(["sm", "md", "lg"]),
+  indicatorSize: m.oneOf(["sm", "md", "lg"]),
   /**
    * Sets the visibility of the progress indicator.
    *
    * Defaults to **true**.
    */
-  open: u.bool,
+  open: m.bool,
   /**
    * The current progress of a determinate progress indicator. Must be between 0 and 1.
    *
    * Defaults to **0**.
    */
-  progress: u.number,
+  progress: m.number,
   /**
    * @deprecated _Renamed, see indicatorSize instead._
    *
@@ -193,20 +193,20 @@ var me = (
    *
    * Defaults to **undefined**.
    */
-  size: ee(u.oneOf(["sm", "md", "lg"]), "CircularProgress", "Renamed, see indicatorSize instead."),
+  size: ee(m.oneOf(["sm", "md", "lg"]), "CircularProgress", "Renamed, see indicatorSize instead."),
   /**
    * Color of the indicator stroke with 'primary' or 'secondary' theme color.
    *
    * Defaults to **'primary'**.
    */
-  themeColor: u.oneOf(["primary", "secondary", "primary-variant", "secondary-variant", "two-color", "two-color-variant", "on-primary", "on-secondary", "on-success", "on-danger", "on-unknown-dark", "on-unknown-light"]),
+  themeColor: m.oneOf(["primary", "secondary", "primary-variant", "secondary-variant", "two-color", "two-color-variant", "on-primary", "on-secondary", "on-success", "on-danger", "on-unknown-dark", "on-unknown-light"]),
   /**
    * An indeterminate CircularProgress indicator will continue spinning until closed. A determinate CircularProgress indicator will display the current progress.
    *
    * Defaults to **'indeterminate'**.
    */
-  variant: u.oneOf(["determinate", "indeterminate"])
-}, he = {
+  variant: m.oneOf(["determinate", "indeterminate"])
+}, fe = {
   ariaLabel: "Progress Indicator",
   className: void 0,
   indicatorSize: "lg",
@@ -214,21 +214,21 @@ var me = (
   progress: 0,
   themeColor: "primary",
   variant: "indeterminate"
-}, fe = ["ariaLabel", "className", "open", "progress", "size", "indicatorSize", "themeColor", "variant"], h = he, W = /* @__PURE__ */ re(function(s, e) {
-  var r, c = s.ariaLabel, a = c === void 0 ? h.ariaLabel : c, l = s.className, g = l === void 0 ? h.className : l, v = s.open, D = v === void 0 ? h.open : v, A = s.progress, d = A === void 0 ? h.progress : A;
+}, ge = ["ariaLabel", "className", "open", "progress", "size", "indicatorSize", "themeColor", "variant"], v = fe, W = /* @__PURE__ */ re(function(s, e) {
+  var r, o = s.ariaLabel, a = o === void 0 ? v.ariaLabel : o, n = s.className, P = n === void 0 ? v.className : n, d = s.open, y = d === void 0 ? v.open : d, p = s.progress, f = p === void 0 ? v.progress : p;
   s.size;
-  var k = s.indicatorSize, P = k === void 0 ? h.indicatorSize : k, R = s.themeColor, E = R === void 0 ? h.themeColor : R, O = s.variant, b = O === void 0 ? h.variant : O, G = X(s, fe), L = H(), S = H();
+  var u = s.indicatorSize, k = u === void 0 ? v.indicatorSize : u, O = s.themeColor, E = O === void 0 ? v.themeColor : O, z = s.variant, b = z === void 0 ? v.variant : z, G = X(s, ge), L = R(), S = R();
   te(e, function() {
     return L.current;
   }, []), T(function() {
-    return S.current = me.attachTo(L.current), function() {
+    return S.current = he.attachTo(L.current), function() {
       S.current.destroy();
     };
   }, []), T(function() {
-    (b === "determinate" && d < 0 || d > 1) && Z("CircularProgress: `progress` must be between 0 and 1."), S.current.determinate = b === "determinate", S.current.progress = d;
-  }, [d, b]);
+    (b === "determinate" && f < 0 || f > 1) && Z("CircularProgress: `progress` must be between 0 and 1."), S.current.determinate = b === "determinate", S.current.progress = f;
+  }, [f, b]);
   var K = function() {
-    switch (P) {
+    switch (k) {
       case "xs":
         return {
           heightWidth: "16px",
@@ -302,86 +302,86 @@ var me = (
           halfStrokeDashoffset: "56.549"
         };
     }
-  }, o = K(), z = o.heightWidth, n = o.viewBox, i = o.cxCy, f = o.r, _ = o.strokeWidth, B = o.strokeWidth80, C = o.strokeDashArray, J = o.strokeDashoffset, x = o.halfStrokeDashoffset, N = se(function() {
-    var I, F, j;
+  }, c = K(), B = c.heightWidth, l = c.viewBox, i = c.cxCy, _ = c.r, D = c.strokeWidth, M = c.strokeWidth80, A = c.strokeDashArray, J = c.strokeDashoffset, x = c.halfStrokeDashoffset, N = se(function() {
+    var I, j, $;
     return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", {
       className: "mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left"
     }, /* @__PURE__ */ t.createElement("svg", {
       className: "mdc-circular-progress__indeterminate-circle-graphic",
-      viewBox: w(I = "0 0 ".concat(n, " ")).call(I, n),
+      viewBox: w(I = "0 0 ".concat(l, " ")).call(I, l),
       xmlns: "http://www.w3.org/2000/svg"
     }, /* @__PURE__ */ t.createElement("circle", {
       cx: i,
       cy: i,
-      r: f,
-      strokeDasharray: C,
+      r: _,
+      strokeDasharray: A,
       strokeDashoffset: x,
-      strokeWidth: _
+      strokeWidth: D
     }))), /* @__PURE__ */ t.createElement("div", {
       className: "mdc-circular-progress__gap-patch"
     }, /* @__PURE__ */ t.createElement("svg", {
       className: "mdc-circular-progress__indeterminate-circle-graphic",
-      viewBox: w(F = "0 0 ".concat(n, " ")).call(F, n),
+      viewBox: w(j = "0 0 ".concat(l, " ")).call(j, l),
       xmlns: "http://www.w3.org/2000/svg"
     }, /* @__PURE__ */ t.createElement("circle", {
       cx: i,
       cy: i,
-      r: f,
-      strokeDasharray: C,
+      r: _,
+      strokeDasharray: A,
       strokeDashoffset: x,
-      strokeWidth: B
+      strokeWidth: M
     }))), /* @__PURE__ */ t.createElement("div", {
       className: "mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right"
     }, /* @__PURE__ */ t.createElement("svg", {
       className: "mdc-circular-progress__indeterminate-circle-graphic",
-      viewBox: w(j = "0 0 ".concat(n, " ")).call(j, n),
+      viewBox: w($ = "0 0 ".concat(l, " ")).call($, l),
       xmlns: "http://www.w3.org/2000/svg"
     }, /* @__PURE__ */ t.createElement("circle", {
       cx: i,
       cy: i,
-      r: f,
-      strokeDasharray: C,
+      r: _,
+      strokeDasharray: A,
       strokeDashoffset: x,
-      strokeWidth: _
+      strokeWidth: D
     }))));
-  }, [i, x, f, C, _, B, n]), M = E === "two-color" || E === "two-color-variant";
+  }, [i, x, _, A, D, M, l]), F = E === "two-color" || E === "two-color-variant";
   return /* @__PURE__ */ t.createElement("div", Y({
     ref: L,
-    className: $("lmnt", "mdc-circular-progress", b === "indeterminate" && "mdc-circular-progress--indeterminate", !D && "mdc-circular-progress--closed", E && "lmnt-circular-progress--".concat(E), g),
+    className: H("lmnt", "mdc-circular-progress", b === "indeterminate" && "mdc-circular-progress--indeterminate", !y && "mdc-circular-progress--closed", E && "lmnt-circular-progress--".concat(E), P),
     style: {
-      width: z,
-      height: z
+      width: B,
+      height: B
     },
     role: "progressbar",
     "aria-label": a,
     "aria-valuemin": "0",
     "aria-valuemax": "1",
-    "aria-valuenow": d
+    "aria-valuenow": f
   }, G), /* @__PURE__ */ t.createElement("div", {
     className: "mdc-circular-progress__determinate-container"
   }, /* @__PURE__ */ t.createElement("svg", {
     className: "mdc-circular-progress__determinate-circle-graphic",
-    viewBox: w(r = "0 0 ".concat(n, " ")).call(r, n),
+    viewBox: w(r = "0 0 ".concat(l, " ")).call(r, l),
     xmlns: "http://www.w3.org/2000/svg"
   }, /* @__PURE__ */ t.createElement("circle", {
     className: "mdc-circular-progress__determinate-track",
     cx: i,
     cy: i,
-    r: f,
-    strokeWidth: _
+    r: _,
+    strokeWidth: D
   }), /* @__PURE__ */ t.createElement("circle", {
     className: "mdc-circular-progress__determinate-circle",
     cx: i,
     cy: i,
-    r: f,
-    strokeDasharray: C,
+    r: _,
+    strokeDasharray: A,
     strokeDashoffset: J,
-    strokeWidth: _
+    strokeWidth: D
   }))), /* @__PURE__ */ t.createElement("div", {
     className: "mdc-circular-progress__indeterminate-container"
   }, /* @__PURE__ */ t.createElement("div", {
-    className: $("mdc-circular-progress__spinner-layer", M && "mdc-circular-progress__color-1")
-  }, N()), M && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", {
+    className: H("mdc-circular-progress__spinner-layer", F && "mdc-circular-progress__color-1")
+  }, N()), F && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", {
     className: "mdc-circular-progress__spinner-layer mdc-circular-progress__color-2"
   }, N()), /* @__PURE__ */ t.createElement("div", {
     className: "mdc-circular-progress__spinner-layer mdc-circular-progress__color-3"
@@ -391,59 +391,71 @@ var me = (
 });
 W.displayName = "CircularProgress";
 W.propTypes = pe;
-const ge = "_centered_1aq9c_1", ve = {
-  centered: ge
-}, Ne = ({
+const ve = "_centered_1aq9c_1", _e = {
+  centered: ve
+}, we = ({
   size: s,
   center: e = !1,
   text: r,
-  textPosition: c = "bottom",
-  color: a = "primary",
-  spinnerOnly: l = !1,
+  subText: o,
+  textPosition: a = "bottom",
+  color: n = "primary",
+  spinnerOnly: P = !1,
   //Due to we don't have (and want) to use a translation logic in this component, we are using a hardcoded message
-  impatienceMessage: g = "This is taking longer than expected. Please be patient.",
-  impatienceTimeout: v = 10
+  impatienceMessage: d = "This is taking longer than expected. Please be patient.",
+  impatienceTimeout: y = 10
 }) => {
-  const [D, A] = ae(0);
+  const [p, f] = ae(!1), u = R(null);
   T(() => {
-    const k = setInterval(() => {
-      A((P) => P + 1);
-    }, 1e3);
-    return () => clearInterval(k);
-  }, []);
-  const d = ie(() => g && D > v ? g : r, [g, v, r, D]);
-  return s === "big" ? /* @__PURE__ */ y(ue, { text: d }) : l ? /* @__PURE__ */ y(
+    if (!(u.current || p))
+      return y !== "disabled" && d && (u.current = setTimeout(() => {
+        f(!0);
+      }, y * 1e3)), () => {
+        u.current && (clearTimeout(u.current), u.current = null);
+      };
+  }, [d, y, p]);
+  const k = ie(() => p && d ? d : r, [d, p, r]);
+  return s === "big" ? /* @__PURE__ */ C(me, { text: k, subText: o }) : P ? /* @__PURE__ */ C(
     W,
     {
       "data-testid": "loading-spinner",
-      themeColor: a,
+      themeColor: n,
       indicatorSize: s ?? "md"
     }
-  ) : /* @__PURE__ */ y(
+  ) : /* @__PURE__ */ C(
     le,
     {
       "data-testid": "loading-spinner-padding",
       variant: "standard",
-      className: e ? ve.centered : "",
+      className: e ? _e.centered : "",
       children: /* @__PURE__ */ Q(
         ce,
         {
           "data-testid": "loading-spinner-group",
           fullWidth: !0,
-          direction: c === "right" ? "horizontal" : "vertical",
+          direction: a === "right" ? "horizontal" : "vertical",
           gap: "dense",
           primaryAlign: "center",
           secondaryAlign: "center",
           children: [
-            /* @__PURE__ */ y(
+            /* @__PURE__ */ C(
               W,
               {
                 "data-testid": "loading-spinner",
-                themeColor: a,
+                themeColor: n,
                 indicatorSize: s ?? "lg"
               }
             ),
-            /* @__PURE__ */ y(de, { themeColor: `text-${a}-on-background`, tag: "div", "data-testid": "loading-text", children: d })
+            /* @__PURE__ */ C(de, { themeColor: `text-${n}-on-background`, tag: "div", "data-testid": "loading-text", children: k }),
+            o && /* @__PURE__ */ C(
+              ue,
+              {
+                themeColor: "text-secondary-on-background",
+                tag: "p",
+                "data-testid": "loading-subText",
+                children: o
+              }
+            )
           ]
         }
       )
@@ -451,5 +463,5 @@ const ge = "_centered_1aq9c_1", ve = {
   );
 };
 export {
-  Ne as LoadingSpinner
+  we as LoadingSpinner
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "2.26.3",
+  "version": "2.27.0",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",