Update of all HTML Matomo loader from Core (#23742)

* Update of all HTML Matomo loader from Core
* Update tests
* Create a reusable twig template for Matomo loader

Author: tzi

plugins/Actions/javascripts/actionsDataTable.js

@@ -196,7 +196,10 @@
                 $insertAfter.after('\
                 <tr id="' + divIdToReplaceWithSubTable + '" class="cellSubDataTable">\
                     <td colspan="' + numberOfColumns + '">\
-                            <span class="loadingPiwik" style="display:inline"><img src="plugins/Morpheus/images/loading-blue.gif" /> Loading...</span>\
+                        <span class="loadingPiwik" style="display:inline">\
+                            <span class="matomo-loader"><span></span><span></span><span></span></span>\
+                            Loading...\
+                        </span>\
                     </td>\
                 </tr>\
                 ');

plugins/Annotations/templates/getAnnotationManager.twig

@@ -12,7 +12,10 @@
     <div class="annotation-list">
         {% include "@Annotations/_annotationList.twig" %}
 
-        <span class="loadingPiwik" style="display:none;"><img src="plugins/Morpheus/images/loading-blue.gif"/>{{ 'General_Loading'|translate }}</span>
+        <span class="loadingPiwik" style="display:none;">
+            {% include "@CoreHome/_loader.twig" %}
+            {{ 'General_Loading'|translate }}
+        </span>
 
     </div>
 

plugins/CoreHome/javascripts/dataTable.js

@@ -1557,7 +1557,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                         '<tr class="subDataTableContainer">' +
                             '<td colspan="' + numberOfColumns + '" class="cellSubDataTable">' +
                             '<div id="' + divIdToReplaceWithSubTable + '">' +
-                            '<span class="loadingPiwik" style="display:inline"><img src="plugins/Morpheus/images/loading-blue.gif" />' + _pk_translate('General_Loading') + '</span>' +
+                            '<span class="loadingPiwik" style="display:inline"><span class="matomo-loader"><span></span><span></span><span></span></span>' + _pk_translate('General_Loading') + '</span>' +
                             '</div>' +
                             '</td>' +
                             '</tr>'

plugins/CoreHome/templates/_dataTableFooter.twig

@@ -40,14 +40,20 @@
         {% endif %}
     </div>
 
-    <span class="loadingPiwik" style="display:none;"><img src="plugins/Morpheus/images/loading-blue.gif"/> {{ 'General_LoadingData'|translate }}</span>
+    <span class="loadingPiwik" style="display:none;">
+        {% include "@CoreHome/_loader.twig" %}
+        {{ 'General_LoadingData'|translate }}
+    </span>
 
     {% if properties.show_footer_message is defined and properties.show_footer_message is not empty %}
         <div class='datatableFooterMessage'>{{ properties.show_footer_message | raw }}</div>
     {% endif %}
 
 </div>
 
-<span class="loadingPiwikBelow" style="display:none;"><img src="plugins/Morpheus/images/loading-blue.gif"/> {{ 'General_LoadingData'|translate }}</span>
+<span class="loadingPiwikBelow" style="display:none;">
+    {% include "@CoreHome/_loader.twig" %}
+    {{ 'General_LoadingData'|translate }}
+</span>
 
 <div class="dataTableSpacer"></div>

plugins/CoreHome/templates/_loader.twig

@@ -0,0 +1 @@
+<span class="matomo-loader"><span></span><span></span><span></span></span>

plugins/CoreHome/vue/dist/CoreHome.umd.js

@@ -61,10 +61,7 @@
       class="loadingPiwik"
       style="display:none;"
     >
-      <img
-        src="plugins/Morpheus/images/loading-blue.gif"
-        :alt="translate('General_LoadingData')"
-      />
+      <MatomoLoader />
       {{ translate('General_LoadingData') }}
     </div>
   </div>
@@ -77,6 +74,7 @@ import ComparisonsStoreInstance from './Comparisons.store.instance';
 import Matomo from '../Matomo/Matomo';
 import MatomoUrl from '../MatomoUrl/MatomoUrl';
 import AjaxHelper from '../AjaxHelper/AjaxHelper';
+import MatomoLoader from '../MatomoLoader/MatomoLoader';
 import { translate } from '../translate';
 import Tooltips from '../Tooltips/Tooltips';
 
@@ -102,6 +100,9 @@ interface ComparisonState {
 export default defineComponent({
   props: {
   },
+  components: {
+    MatomoLoader,
+  },
   directives: {
     Tooltips,
   },

plugins/CoreHome/vue/dist/CoreHome.umd.min.js

@@ -116,8 +116,8 @@ export default defineComponent({
     Form,
   },
   components: {
-    MatomoLoader,
     Field,
+    MatomoLoader,
   },
   props: {
     /**

plugins/CoreHome/vue/src/Comparisons/Comparisons.vue

@@ -15,16 +15,18 @@
       />
     </div>
     <span v-show="!!label">
-      <img src="plugins/Morpheus/images/loading-blue.gif" style="margin-right: 3.5px" />
+      <MatomoLoader />
       <span class="label" v-html="$sanitize(label)" />
     </span>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import MatomoLoader from '../MatomoLoader/MatomoLoader.vue';
 
 export default defineComponent({
+  components: { MatomoLoader },
   props: {
     progress: {
       type: Number,