IBX-6549: Implemeted redesign loader (#1001)

Author: Gengar-i

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({

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));
+    }
+}

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';

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%;

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 %}