From 9dfcfbb0eef0a191b1e585ea7ab67461fe489fed Mon Sep 17 00:00:00 2001
From: bjoern-m <bjoern.mueller@hanko.io>
Date: Thu, 9 Nov 2023 15:48:37 +0100
Subject: [PATCH] feat(elements): introduce a loading-spinner-container shadow
 part

---
 frontend/elements/README.md                               | 1 +
 frontend/elements/src/components/icons/LoadingSpinner.tsx | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/elements/README.md b/frontend/elements/README.md
index 76dc2569f..a9426a37b 100644
--- a/frontend/elements/README.md
+++ b/frontend/elements/README.md
@@ -440,6 +440,7 @@ The following parts are available:
 - `divider-text` - the divider text
 - `divider-line` - the line before and after the `divider-text`
 - `form-item` - the container of a form item, e.g. an input field or a button
+- `loading-spinner-container` - a container that wraps texts or icons to be replaced by a loading spinner.
 
 #### Examples
 
diff --git a/frontend/elements/src/components/icons/LoadingSpinner.tsx b/frontend/elements/src/components/icons/LoadingSpinner.tsx
index 5bc963ff9..809f53fa7 100644
--- a/frontend/elements/src/components/icons/LoadingSpinner.tsx
+++ b/frontend/elements/src/components/icons/LoadingSpinner.tsx
@@ -19,18 +19,21 @@ const LoadingSpinner = ({
   secondary,
   hasIcon,
 }: Props) => {
+  const partName = "loading-spinner-container";
+
   return (
     <Fragment>
       {isLoading ? (
-        <div className={styles.loadingSpinnerWrapper}>
+        <div className={styles.loadingSpinnerWrapper} part={partName}>
           <Icon name={"spinner"} secondary={secondary} />
         </div>
       ) : isSuccess ? (
-        <div className={styles.loadingSpinnerWrapper}>
+        <div className={styles.loadingSpinnerWrapper} part={partName}>
           <Icon name={"checkmark"} secondary={secondary} fadeOut={fadeOut} />
         </div>
       ) : (
         <div
+          part={partName}
           className={
             hasIcon
               ? styles.loadingSpinnerWrapperIcon