@hortiview/shared-components 0.0.9707 → 0.0.9939

package/README.md

@@ -709,6 +709,29 @@ return <>
 </>
 ```
 
+
+The Loading spinner will automatically change to another text, after a certain waiting time, the text and time are adjustable. 
+This behavior is enabled per default (10 seconds) - it can be disabled by passing `null` to impatienceMessage.
+
+```JSX
+import { LoadingSpinner } from  '@hortiview/shared-components';
+
+const [loading, setLoading] = useState(false)
+
+const onSubmit = () => {
+  setLoading(true);
+  await someComplexLogicThatTakesVeryLong();
+  setLoading(false);
+}
+return <>
+  {loading && <LoadingSpinner text='Loading something ...' impatienceTimeout={20} impatienceMessage={'Something takes longer than expected'} />}
+  <Form obSubmit={onSubmit} />
+  <Button type='submit' />
+</>
+```
+
+
+
 ### Modal
 
 Provides the normal elements modal with one additional change. If you are on fullscreen modal size the max-height and max-width is set to 100svh/svw (Smallest ViewPort height/width).

package/dist/components/AlertBanner/AlertBanner.test.js

@@ -1,8 +1,8 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
-import { a as t, s } from "../../react.esm-Dy4VzU4L.js";
+import { a as t, s } from "../../react.esm-CHvVvf3L.js";
 import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
 import { AlertBanner as n } from "./AlertBanner.js";
-import { d as c, b as p, t as r, g as o, v as a } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as c, b as p, t as r, g as o, v as a } from "../../vi.JYQecGiw-BpOAB4v6.js";
 c("AlertBanner Test", () => {
   p(() => {
     a.spyOn(l, "useBreakpoints").mockReturnValue({

package/dist/components/BaseView/BaseView.test.js

@@ -1,8 +1,8 @@
 import { jsx as a, Fragment as s } from "react/jsx-runtime";
-import { a as r, s as e, f as p } from "../../react.esm-Dy4VzU4L.js";
+import { a as r, s as e, f as p } from "../../react.esm-CHvVvf3L.js";
 import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
 import { BaseView as i } from "./BaseView.js";
-import { d as u, b as m, t as n, g as t, v as c } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as u, b as m, t as n, g as t, v as c } from "../../vi.JYQecGiw-BpOAB4v6.js";
 u("BaseView Test", () => {
   m(() => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({

package/dist/components/BasicHeading/BasicHeading.test.js

@@ -1,8 +1,8 @@
 import { jsx as o, Fragment as c } from "react/jsx-runtime";
 import { Button as g } from "@element/react-components";
 import { BasicHeading as a } from "./BasicHeading.js";
-import { a as i, s as n } from "../../react.esm-Dy4VzU4L.js";
-import { d as h, t as s, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { a as i, s as n } from "../../react.esm-CHvVvf3L.js";
+import { d as h, t as s, g as e } from "../../vi.JYQecGiw-BpOAB4v6.js";
 h("BasicHeading-Test", () => {
   s("render small container without content", () => {
     i(/* @__PURE__ */ o(a, { heading: "Test" }));

package/dist/components/BlockView/BlockView.test.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
-import { a as s, s as o, f as n } from "../../react.esm-Dy4VzU4L.js";
+import { a as s, s as o, f as n } from "../../react.esm-CHvVvf3L.js";
 import { BlockView as i } from "./BlockView.js";
-import { d as a, v as B, t as r, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as a, v as B, t as r, g as t } from "../../vi.JYQecGiw-BpOAB4v6.js";
 a("BlockView Test", () => {
   const c = B.fn(), e = {
     id: "1",

package/dist/components/ChipCard/ChipCard.test.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { a, s as i } from "../../react.esm-Dy4VzU4L.js";
+import { a, s as i } from "../../react.esm-CHvVvf3L.js";
 import { ChipCard as n } from "./ChipCard.js";
-import { d as s, t as c, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as s, t as c, g as t } from "../../vi.JYQecGiw-BpOAB4v6.js";
 s("ChipCard Component", () => {
   const r = "Test Label", o = "domain";
   c("renders the correct label and icon", () => {

package/dist/components/ContextMenu/ContextMenu.test.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
-import { a as B, s as t, f as o, w as s } from "../../react.esm-Dy4VzU4L.js";
+import { a as B, s as t, f as o, w as s } from "../../react.esm-CHvVvf3L.js";
 import { ContextMenu as p } from "./ContextMenu.js";
-import { v as l, d as k, t as T, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { v as l, d as k, t as T, g as e } from "../../vi.JYQecGiw-BpOAB4v6.js";
 const C = l.fn(), a = l.fn(), i = l.fn(), g = [
   { primaryText: "Open", onClick: C, leadingBlock: "add" },
   { primaryText: "Delete", onClick: i, leadingBlock: "delete_outline" },

package/dist/components/DeleteModal/DeleteModal.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as c, s as e } from "../../react.esm-Dy4VzU4L.js";
+import { a as c, s as e } from "../../react.esm-CHvVvf3L.js";
 import { DeleteModal as b } from "./DeleteModal.js";
-import { d as B, t as a, v as o, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as B, t as a, v as o, g as t } from "../../vi.JYQecGiw-BpOAB4v6.js";
 B("DeleteModal Test", () => {
   a("should render the DeleteModal properly", () => {
     c(

package/dist/components/Disclaimer/Disclaimer.test.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import { a as r, s as t } from "../../react.esm-Dy4VzU4L.js";
+import { a as r, s as t } from "../../react.esm-CHvVvf3L.js";
 import { Disclaimer as s } from "./Disclaimer.js";
-import { d as i, t as m, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as i, t as m, g as e } from "../../vi.JYQecGiw-BpOAB4v6.js";
 i("Disclaimer test", () => {
   m("should render with default text", () => {
     r(/* @__PURE__ */ o(s, { text: "disclaimer.default" })), e(t.getByText("disclaimer.default")).toBeInTheDocument();

package/dist/components/EmptyView/EmptyView.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as o, w as r, f as l } from "../../react.esm-Dy4VzU4L.js";
+import { a as s, s as o, w as r, f as l } from "../../react.esm-CHvVvf3L.js";
 import { EmptyView as c } from "./EmptyView.js";
-import { d as h, t as T, g as e, v as d } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as h, t as T, g as e, v as d } from "../../vi.JYQecGiw-BpOAB4v6.js";
 h("EmptyView", () => {
   T("should render", () => {
     s(/* @__PURE__ */ n(c, {})), e(o.getByText("dashbord")).toBeInTheDocument();

package/dist/components/Filter/Filter.test.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import { a, s as t, f as c, t as u, w as d } from "../../react.esm-Dy4VzU4L.js";
+import { a, s as t, f as c, t as u, w as d } from "../../react.esm-CHvVvf3L.js";
 import { a as s } from "../../useBreakpoints-MzTZ0tCT.js";
 import { Filter as T } from "./Filter.js";
-import { v as x, b as f, d as y, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { v as x, b as f, d as y, t as B, g as e } from "../../vi.JYQecGiw-BpOAB4v6.js";
 const o = x.fn();
 f(() => {
   x.spyOn(s, "useBreakpoints").mockReturnValue({

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.test.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
-import { a as n, s as t, f as m } from "../../../react.esm-Dy4VzU4L.js";
+import { a as n, s as t, f as m } from "../../../react.esm-CHvVvf3L.js";
 import { FormCheckBox as c } from "./FormCheckBox.js";
-import { v as e, d as h, t as l, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+import { v as e, d as h, t as l, g as r } from "../../../vi.JYQecGiw-BpOAB4v6.js";
 const a = e.fn();
 e.mock("react-hook-form", () => ({
   ...e.importActual("react-hook-form"),

package/dist/components/FormComponents/FormDatePicker/FormDatePicker.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as a, f as m } from "../../../react.esm-Dy4VzU4L.js";
+import { a as s, s as a, f as m } from "../../../react.esm-CHvVvf3L.js";
 import { FormDatePicker as c } from "./FormDatePicker.js";
-import { v as e, d as f, t as l, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+import { v as e, d as f, t as l, g as r } from "../../../vi.JYQecGiw-BpOAB4v6.js";
 const i = e.fn();
 e.mock("react-hook-form", () => ({
   ...e.importActual("react-hook-form"),

package/dist/components/FormComponents/FormRadio/FormRadio.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as t, f as m } from "../../../react.esm-Dy4VzU4L.js";
+import { a as s, s as t, f as m } from "../../../react.esm-CHvVvf3L.js";
 import { FormRadio as l } from "./FormRadio.js";
-import { v as e, d as c, t as i, g as o } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+import { v as e, d as c, t as i, g as o } from "../../../vi.JYQecGiw-BpOAB4v6.js";
 const r = e.fn();
 e.mock("react-hook-form", () => ({
   ...e.importActual("react-hook-form"),

package/dist/components/FormComponents/FormSelect/FormSelect.test.js

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
-import { a, s as t, f as T, w as p } from "../../../react.esm-Dy4VzU4L.js";
-import { u as B } from "../../../index-DW4oU_OU.js";
+import { a, s as t, f as T, w as p } from "../../../react.esm-CHvVvf3L.js";
+import { u as B } from "../../../index-IMXII42b.js";
 import { FormSelect as i } from "./FormSelect.js";
 import { SelectTooltipText as d } from "./SelectTooltipText.js";
-import { v as n, d as f, t as u, g as e } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+import { v as n, d as f, t as u, g as e } from "../../../vi.JYQecGiw-BpOAB4v6.js";
 const g = n.fn();
 n.mock("react-hook-form", () => ({
   ...n.importActual("react-hook-form"),

package/dist/components/FormComponents/FormSlider/FormSlider.test.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
-import { a, s as n } from "../../../react.esm-Dy4VzU4L.js";
+import { a, s as n } from "../../../react.esm-CHvVvf3L.js";
 import { FormSlider as l } from "./FormSlider.js";
-import { v as e, d as m, t as i, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+import { v as e, d as m, t as i, g as r } from "../../../vi.JYQecGiw-BpOAB4v6.js";
 const o = e.fn();
 e.mock("react-hook-form", () => ({
   ...e.importActual("react-hook-form"),

package/dist/components/FormComponents/FormText/FormText.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as r, f as d } from "../../../react.esm-Dy4VzU4L.js";
+import { a as s, s as r, f as d } from "../../../react.esm-CHvVvf3L.js";
 import { FormText as o } from "./FormText.js";
-import { v as a, d as u, t as l, g as e } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+import { v as a, d as u, t as l, g as e } from "../../../vi.JYQecGiw-BpOAB4v6.js";
 const m = a.fn();
 a.mock("react-hook-form", () => ({
   ...a.importActual("react-hook-form"),

package/dist/components/GenericTable/GenericTable.test.js

@@ -1,8 +1,8 @@
 import { jsx as a, jsxs as B } from "react/jsx-runtime";
-import { a as o, s as e } from "../../react.esm-Dy4VzU4L.js";
+import { a as o, s as e } from "../../react.esm-CHvVvf3L.js";
 import { a as m } from "../../useBreakpoints-MzTZ0tCT.js";
 import { GenericTable as s } from "./GenericTable.js";
-import { d as h, v as r, t as i, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as h, v as r, t as i, g as t } from "../../vi.JYQecGiw-BpOAB4v6.js";
 h("GenericTable Test", () => {
   r.spyOn(m, "useBreakpoints").mockReturnValue({
     isDesktop: !0,

package/dist/components/GenericTable/Mobile/GenericCard.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as c, s as o } from "../../../react.esm-Dy4VzU4L.js";
+import { a as c, s as o } from "../../../react.esm-CHvVvf3L.js";
 import { GenericCard as i } from "./GenericCard.js";
-import { d as m, t as s, g as e } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as m, t as s, g as e } from "../../../vi.JYQecGiw-BpOAB4v6.js";
 m("GenericCard", () => {
   const d = {
     id: 1,

package/dist/components/GenericTable/Mobile/GenericCardList.test.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import { a as r, s as n, w as l } from "../../../react.esm-Dy4VzU4L.js";
+import { a as r, s as n, w as l } from "../../../react.esm-CHvVvf3L.js";
 import { GenericCardList as s } from "./GenericCardList.js";
-import { d as g, t as i, g as e } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as g, t as i, g as e } from "../../../vi.JYQecGiw-BpOAB4v6.js";
 g("GenericCardList", () => {
   const d = [
     { id: "name", header: "Name", accessor: "name", asCardTitle: !0 },

package/dist/components/HashTabView/HashTabView.test.js

@@ -1,7 +1,7 @@
 import { jsx as n, Fragment as o } from "react/jsx-runtime";
-import { a, s as e, f as r } from "../../react.esm-Dy4VzU4L.js";
+import { a, s as e, f as r } from "../../react.esm-CHvVvf3L.js";
 import { HashTabView as c } from "./HashTabView.js";
-import { d as h, t as l, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as h, t as l, g as t } from "../../vi.JYQecGiw-BpOAB4v6.js";
 const m = [
   {
     title: "Map",

package/dist/components/HeaderFilter/HeaderFilter.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as i, s as t, f as T } from "../../react.esm-Dy4VzU4L.js";
+import { a as i, s as t, f as T } from "../../react.esm-CHvVvf3L.js";
 import { HeaderFilter as s } from "./HeaderFilter.js";
-import { d as c, t as o, v as l, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as c, t as o, v as l, g as e } from "../../vi.JYQecGiw-BpOAB4v6.js";
 c("HeaderFilter-Test", () => {
   o("render header filter", () => {
     i(

package/dist/components/Iconify/Iconify.test.js

@@ -1,8 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
 import { I as c } from "../../Iconify-DoU6pP1o.js";
 import { AvailableCustomIcons as l } from "../../enums/AvailableCustomIcons.js";
-import { a as r, w as s, s as i } from "../../react.esm-Dy4VzU4L.js";
-import { d as f, t as a, g as o } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { a as r, w as s, s as i } from "../../react.esm-CHvVvf3L.js";
+import { d as f, t as a, g as o } from "../../vi.JYQecGiw-BpOAB4v6.js";
 f("Iconify Test", async () => {
   const m = Object.keys(l).filter((e) => isNaN(Number(e)));
   a.each(m)("render available custom icon (%s)", async (e) => {

package/dist/components/InfoGroup/InfoGroup.test.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import { a as l, s as t } from "../../react.esm-Dy4VzU4L.js";
+import { a as l, s as t } from "../../react.esm-CHvVvf3L.js";
 import { InfoGroup as r } from "./InfoGroup.js";
-import { d as s, t as i, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as s, t as i, g as e } from "../../vi.JYQecGiw-BpOAB4v6.js";
 s("InfoGroup Test", () => {
   i("render Single InfoGroup", () => {
     l(/* @__PURE__ */ o(r, { fields: m }));

package/dist/components/ListArea/ListArea.test.js

@@ -1,9 +1,9 @@
 import { jsx as r, Fragment as i } from "react/jsx-runtime";
 import { TypoButton as p } from "@element/react-components";
-import { a as s, s as a, f as u } from "../../react.esm-Dy4VzU4L.js";
+import { a as s, s as a, f as u } from "../../react.esm-CHvVvf3L.js";
 import { ListArea as c } from "./ListArea.js";
 import { getGroupedItems as h } from "./ListAreaService.js";
-import { d as m, t as n, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as m, t as n, g as t } from "../../vi.JYQecGiw-BpOAB4v6.js";
 m("ListArea Test", () => {
   const o = [
     {

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

@@ -1,8 +1,8 @@
 import { jsx as o } from "react/jsx-runtime";
 import { BigLoadingSpinner as n } from "./BigLoadingSpinner.js";
-import { a as i, s as e } from "../../../react.esm-Dy4VzU4L.js";
+import { a as i, s as e } from "../../../react.esm-CHvVvf3L.js";
 import { s as r } from "../../../bigLoadingSpinner.module-GgbFol8k.js";
-import { d as g, t as a, g as t } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as g, t as a, g as t } from "../../../vi.JYQecGiw-BpOAB4v6.js";
 g("BigLoadingSpinner Test", () => {
   a("render BigLoadingSpinner with custom loading text", () => {
     i(/* @__PURE__ */ o(n, { text: "Please wait..." })), t(e.getByText("Please wait...")).toBeInTheDocument(), t(e.getByRole("progressbar")).toBeInTheDocument();

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

@@ -23,6 +23,14 @@ type LoadingSpinnerProps = {
      * render only the spinner without any text
      */
     spinnerOnly?: boolean;
+    /**
+     * message to show after 10 seconds of loading
+     */
+    impatienceMessage?: string | null;
+    /**
+     * time in seconds to show the impatience message
+     */
+    impatienceTimeout?: number;
 };
 /**
  * A loading spinner component that can be used to show loading state in the application.
@@ -33,10 +41,12 @@ type LoadingSpinnerProps = {
  * @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
+ * @param impatienceMessage message to show after 10 seconds of loading (default: 'This is taking longer than expected. Please be patient.')
+ * @param impatienceTimeout time in seconds to show the impatience message (default: 10)
  * @example <LoadingSpinner text='Something is loading.' />
  * @example <LoadingSpinner size='big' />
  * @example <LoadingSpinner size='md' center color='primary' spinnerOnly={true} />
  * @returns a loading spinner component
  */
-export declare const LoadingSpinner: ({ size, center, text, textPosition, color, spinnerOnly, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingSpinner: ({ size, center, text, textPosition, color, spinnerOnly, impatienceMessage, impatienceTimeout, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,49 +1,63 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { CircularProgress as t, Padding as l, Group as g, TypoBody as m } from "@element/react-components";
-import { BigLoadingSpinner as p } from "../Big/BigLoadingSpinner.js";
-import { s as c } from "../../../loadingSpinner.module-CLtqSMWA.js";
-const C = ({
-  size: i,
-  center: o = !1,
-  text: e,
-  textPosition: a = "bottom",
-  color: n = "primary",
-  spinnerOnly: d = !1
-}) => i === "big" ? /* @__PURE__ */ r(p, { text: e }) : d ? /* @__PURE__ */ r(
-  t,
-  {
-    "data-testid": "loading-spinner",
-    themeColor: n,
-    indicatorSize: i ?? "md"
-  }
-) : /* @__PURE__ */ r(
-  l,
-  {
-    variant: "standard",
-    style: { textAlign: "center" },
-    className: o ? c.loadingSpinnerContainer : "",
-    children: /* @__PURE__ */ s(
-      g,
-      {
-        direction: a === "right" ? "horizontal" : "vertical",
-        gap: "dense",
-        primaryAlign: "center",
-        secondaryAlign: "center",
-        children: [
-          /* @__PURE__ */ r(
-            t,
-            {
-              "data-testid": "loading-spinner",
-              themeColor: n,
-              indicatorSize: i ?? "lg"
-            }
-          ),
-          /* @__PURE__ */ r(m, { themeColor: `text-${n}-on-background`, tag: "div", children: e })
-        ]
-      }
-    )
-  }
-);
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { CircularProgress as s, Padding as h, Group as x, TypoBody as y } from "@element/react-components";
+import { useState as v, useEffect as S, useMemo as C } from "react";
+import { BigLoadingSpinner as b } from "../Big/BigLoadingSpinner.js";
+import { s as A } from "../../../loadingSpinner.module-CLtqSMWA.js";
+const I = ({
+  size: t,
+  center: l = !1,
+  text: i,
+  textPosition: g = "bottom",
+  color: e = "primary",
+  spinnerOnly: m = !1,
+  //Due to we don't have (and want) to use a translation logic in this component, we are using a hardcoded message
+  impatienceMessage: n = "This is taking longer than expected. Please be patient.",
+  impatienceTimeout: o = 10
+}) => {
+  const [a, c] = v(0);
+  S(() => {
+    const p = setInterval(() => {
+      c((f) => f + 1);
+    }, 1e3);
+    return () => clearInterval(p);
+  }, []);
+  const d = C(() => n && a > o ? n : i, [n, o, i, a]);
+  return t === "big" ? /* @__PURE__ */ r(b, { text: d }) : m ? /* @__PURE__ */ r(
+    s,
+    {
+      "data-testid": "loading-spinner",
+      themeColor: e,
+      indicatorSize: t ?? "md"
+    }
+  ) : /* @__PURE__ */ r(
+    h,
+    {
+      variant: "standard",
+      style: { textAlign: "center" },
+      className: l ? A.loadingSpinnerContainer : "",
+      children: /* @__PURE__ */ u(
+        x,
+        {
+          direction: g === "right" ? "horizontal" : "vertical",
+          gap: "dense",
+          primaryAlign: "center",
+          secondaryAlign: "center",
+          children: [
+            /* @__PURE__ */ r(
+              s,
+              {
+                "data-testid": "loading-spinner",
+                themeColor: e,
+                indicatorSize: t ?? "lg"
+              }
+            ),
+            /* @__PURE__ */ r(y, { themeColor: `text-${e}-on-background`, tag: "div", "data-testid": "loading-text", children: d })
+          ]
+        }
+      )
+    }
+  );
+};
 export {
-  C as LoadingSpinner
+  I as LoadingSpinner
 };

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

@@ -1,13 +1,19 @@
-import { jsx as t } from "react/jsx-runtime";
-import { a as r, s as e } from "../../../react.esm-Dy4VzU4L.js";
-import { LoadingSpinner as o } from "./LoadingSpinner.js";
-import { d as a, t as i, g as n } from "../../../vi.JYQecGiw-BbUbJcT8.js";
-a("LoadingSpinner Test", () => {
-  i("render LoadingSpinner without additional params", () => {
-    r(/* @__PURE__ */ t(o, {})), n(e.getByRole("progressbar")).toBeInTheDocument();
-  }), i("render LoadingSpinner with spinner only", () => {
-    r(/* @__PURE__ */ t(o, { spinnerOnly: !0 })), n(e.getByRole("progressbar")).toBeInTheDocument(), n(e.queryByText("Loading")).not.toBeInTheDocument();
-  }), i("render LoadingSpinner with custom loading text", () => {
-    r(/* @__PURE__ */ t(o, { text: "Please wait..." })), n(e.getByText("Please wait...")).toBeInTheDocument();
+import { jsx as n } from "react/jsx-runtime";
+import { a, s as e, b as s } from "../../../react.esm-CHvVvf3L.js";
+import { LoadingSpinner as i } from "./LoadingSpinner.js";
+import { d as m, b as d, t as o, g as t, a as r } from "../../../vi.JYQecGiw-BpOAB4v6.js";
+m("LoadingSpinner Test", () => {
+  d(() => {
+    r.useFakeTimers();
+  }), o("render LoadingSpinner without additional params", () => {
+    a(/* @__PURE__ */ n(i, {})), t(e.getByRole("progressbar")).toBeInTheDocument();
+  }), o("render LoadingSpinner with spinner only", () => {
+    a(/* @__PURE__ */ n(i, { spinnerOnly: !0 })), t(e.getByRole("progressbar")).toBeInTheDocument(), t(e.queryByText("Loading")).not.toBeInTheDocument();
+  }), o("render LoadingSpinner with custom loading text", () => {
+    a(/* @__PURE__ */ n(i, { text: "Please wait..." })), t(e.getByText("Please wait...")).toBeInTheDocument();
+  }), o("render loadingspinner with text changed to impatience message after 10 seconds", async () => {
+    a(/* @__PURE__ */ n(i, { text: "Please wait...", impatienceTimeout: 1 })), t(e.getByText("Please wait...")).toBeInTheDocument(), s(() => {
+      r.advanceTimersByTime(2e3);
+    }), t(e.getByText("This is taking longer than expected. Please be patient.")).toBeInTheDocument();
   });
 });

package/dist/components/OverflowTooltip/OverflowTooltip.test.js

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
 import { TypoDisplay as n } from "@element/react-components";
-import { a as i, s as e, w as s } from "../../react.esm-Dy4VzU4L.js";
-import { u as a } from "../../index-DW4oU_OU.js";
+import { a as i, s as e, w as s } from "../../react.esm-CHvVvf3L.js";
+import { u as a } from "../../index-IMXII42b.js";
 import { OverflowTooltip as c } from "./OverflowTooltip.js";
-import { d as u, t as p, g as r } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as u, t as p, g as r } from "../../vi.JYQecGiw-BpOAB4v6.js";
 u("OverflowTooltip Test", () => {
   p("should render OverflowTooltip on hover", async () => {
     Object.defineProperty(HTMLElement.prototype, "clientWidth", {

package/dist/components/Scrollbar/scrollbar.test.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
-import { a, s as e } from "../../react.esm-Dy4VzU4L.js";
+import { a, s as e } from "../../react.esm-CHvVvf3L.js";
 import { ScrollbarY as d, ScrollbarX as l } from "./Scrollbar.js";
-import { d as c, t, g as o } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as c, t, g as o } from "../../vi.JYQecGiw-BpOAB4v6.js";
 c("Scrollbar", () => {
   t("should render Y correctly", () => {
     a(/* @__PURE__ */ s("div", { "data-testid": "div", className: d }));

package/dist/components/SearchBar/SearchBar.test.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
-import { a as r, s as t, f as h, b as l } from "../../react.esm-Dy4VzU4L.js";
+import { a as r, s as t, f as h, b as l } from "../../react.esm-CHvVvf3L.js";
 import { SearchBar as s } from "./SearchBar.js";
-import { d as m, t as o, v as n, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as m, t as o, v as n, g as e } from "../../vi.JYQecGiw-BpOAB4v6.js";
 m("SearchBar Test", () => {
   o("renders SearchBar component", () => {
     r(

package/dist/components/VerticalDivider/VerticalDivider.test.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { a as r } from "../../react.esm-Dy4VzU4L.js";
+import { a as r } from "../../react.esm-CHvVvf3L.js";
 import { VerticalDivider as s } from "./VerticalDivider.js";
-import { d as o, t as l, g as i } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as o, t as l, g as i } from "../../vi.JYQecGiw-BpOAB4v6.js";
 o("VerticalDivider Test", () => {
   l("it should render with basic styling", () => {
     r(/* @__PURE__ */ e(s, {}));

package/dist/hooks/useBreakpoints.test.js

@@ -1,6 +1,6 @@
-import { r as t, w as s } from "../react.esm-Dy4VzU4L.js";
+import { r as t, w as s } from "../react.esm-CHvVvf3L.js";
 import { u as o } from "../useBreakpoints-MzTZ0tCT.js";
-import { d as a, t as i, g as r } from "../vi.JYQecGiw-BbUbJcT8.js";
+import { d as a, t as i, g as r } from "../vi.JYQecGiw-BpOAB4v6.js";
 a("useBreakpoint Test", () => {
   i("returns object", () => {
     const { result: e } = t(() => o());

package/dist/{index-DW4oU_OU.js → index-IMXII42b.js}

@@ -1,4 +1,4 @@
-import { c as zs, d as _o, e as Dl, l as Ws } from "./react.esm-Dy4VzU4L.js";
+import { c as zs, d as _o, e as Dl, l as Ws } from "./react.esm-CHvVvf3L.js";
 function g(e, t, r) {
   return e.namespaceURI && e.namespaceURI !== "http://www.w3.org/1999/xhtml" || (t = Array.isArray(t) ? t : [
     t

package/dist/{react.esm-Dy4VzU4L.js → react.esm-CHvVvf3L.js}

@@ -2,7 +2,7 @@ import * as mt from "react";
 import Ac from "react";
 import It from "react-dom";
 import { c as Bi, g as Tp } from "./_commonjsHelpers-CT_km90n.js";
-import { r as qp } from "./vi.JYQecGiw-BbUbJcT8.js";
+import { r as qp } from "./vi.JYQecGiw-BpOAB4v6.js";
 var Yl = { exports: {} }, ne = {};
 /**
  * @license React

package/dist/services/services.test.js

@@ -1,6 +1,6 @@
 import { getBlockNumberByDto as r } from "./BlockService.js";
 import { capitalizeFirstLetters as a, trimLeadingAndTrailingSpaces as o } from "./UtilService.js";
-import { d as n, t as e, g as s } from "../vi.JYQecGiw-BbUbJcT8.js";
+import { d as n, t as e, g as s } from "../vi.JYQecGiw-BpOAB4v6.js";
 n("Services Test", () => {
   n("capitalizeFirstLetters", () => {
     e("should capitalize first letters of a lower case string", () => {

package/dist/{vi.JYQecGiw-BbUbJcT8.js → vi.JYQecGiw-BpOAB4v6.js}

@@ -9786,6 +9786,7 @@ function Od() {
 }
 const Ad = Od(), dn = Ad;
 export {
+  dn as a,
   _d as b,
   Pd as d,
   Dp as g,

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": "0.0.9707",
+  "version": "0.0.9939",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",