From 9d4bd2a56b2db874be81288c4f3c521c487ce865 Mon Sep 17 00:00:00 2001
From: Robert Swoboda <53216935+Gengar-i@users.noreply.github.com>
Date: Tue, 21 Nov 2023 13:31:03 +0100
Subject: [PATCH] IBX-6549: Implemeted redesign loader

---
 .../public/js/scripts/embedded.item.actions.js      |  2 +-
 .../public/scss/_embedded-item-actions.scss         | 13 +++++++++++++
 src/bundle/Resources/public/scss/ibexa.scss         |  1 +
 .../Resources/public/scss/mixins/_spinner.scss      |  1 +
 .../embedded_item_actions.html.twig                 |  8 ++------
 5 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 src/bundle/Resources/public/scss/_embedded-item-actions.scss

diff --git a/src/bundle/Resources/public/js/scripts/embedded.item.actions.js b/src/bundle/Resources/public/js/scripts/embedded.item.actions.js
index 655962c696..d6261d0578 100644
--- a/src/bundle/Resources/public/js/scripts/embedded.item.actions.js
+++ b/src/bundle/Resources/public/js/scripts/embedded.item.actions.js
@@ -219,7 +219,7 @@
         triggerElement.dataset.isMenuAttached = 1;
 
         const mainContainer = container.closest('.ibexa-embedded-item-actions');
-        const menuLoader = mainContainer.querySelector('.ibexa-embedded-item-actions__loader');
+        const menuLoader = mainContainer.querySelector('.ibexa-embedded-item-actions__loader-container');
         const askForLanguagesData = Object.keys(languages).length !== 1;
         const languagesData = askForLanguagesData
             ? await getLanguagesData({
diff --git a/src/bundle/Resources/public/scss/_embedded-item-actions.scss b/src/bundle/Resources/public/scss/_embedded-item-actions.scss
new file mode 100644
index 0000000000..be0ddf51d1
--- /dev/null
+++ b/src/bundle/Resources/public/scss/_embedded-item-actions.scss
@@ -0,0 +1,13 @@
+.ibexa-embedded-item-actions {
+    &__loader-container {
+        min-width: calculateRem(100px);
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__loader {
+        margin: calculateRem(10px);
+
+        @include spinner(calculateRem(24px), calculateRem(3px));
+    }
+}
diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss
index 2c67508511..f6ecd82ed7 100644
--- a/src/bundle/Resources/public/scss/ibexa.scss
+++ b/src/bundle/Resources/public/scss/ibexa.scss
@@ -89,6 +89,7 @@
 @import 'inputs';
 @import 'links';
 @import 'footer';
+@import 'embedded-item-actions';
 @import 'popup-menu';
 @import 'multilevel-popup-menu';
 @import 'header-user-menu';
diff --git a/src/bundle/Resources/public/scss/mixins/_spinner.scss b/src/bundle/Resources/public/scss/mixins/_spinner.scss
index 7b348cb594..50b5411674 100644
--- a/src/bundle/Resources/public/scss/mixins/_spinner.scss
+++ b/src/bundle/Resources/public/scss/mixins/_spinner.scss
@@ -3,6 +3,7 @@
         linear-gradient(#{$ibexa-color-black} 0 0) content-box;
 
     width: $size;
+    height: $size;
     padding: $line-size;
     aspect-ratio: 1;
     border-radius: 50%;
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig
index 5ff74f5585..93202adff0 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig
@@ -1,11 +1,7 @@
 <div class="ibexa-embedded-item-actions">
     {% block loader %}
-        <ul class="ibexa-embedded-item-actions__loader ibexa-popup-menu ibexa-popup-menu--hidden">
-            <li class="ibexa-popup-menu__item">
-                <svg class="ibexa-icon ibexa-icon--small ibexa-spin">
-                    <use xlink:href="{{ ibexa_icon_path('spinner') }}"></use>
-                </svg>
-            </li>
+        <ul class="ibexa-embedded-item-actions__loader-container ibexa-popup-menu ibexa-popup-menu--hidden">
+            <li class="ibexa-popup-menu____item ibexa-embedded-item-actions__loader"></li>
         </ul>
     {% endblock %}