Update of all HTML Matomo loader from Core

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/src/Comparisons/Comparisons.vue

@@ -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/src/EntityDuplicator/EntityDuplicatorModal.vue

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

plugins/CoreHome/vue/src/Progressbar/Progressbar.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,

plugins/CustomDimensions/vue/src/Edit/Edit.vue

@@ -12,7 +12,7 @@
     >
       <p v-show="isLoading || isUpdating">
         <span class="loadingPiwik">
-          <img src="plugins/Morpheus/images/loading-blue.gif" />
+          <MatomoLoader />
           {{ translate('General_LoadingData') }}
         </span>
       </p>
@@ -172,12 +172,13 @@ import { defineComponent } from 'vue';
 import {
   clone,
   translate,
-  Matomo,
   ContentBlock,
   CopyToClipboard,
+  Matomo,
+  MatomoLoader,
+  MatomoUrl,
   NotificationsStore,
   NotificationType,
-  MatomoUrl,
 } from 'CoreHome';
 import { Field } from 'CorePluginsAdmin';
 import CustomDimensionsStore from '../CustomDimensions.store';
@@ -202,6 +203,7 @@ export default defineComponent({
   components: {
     ContentBlock,
     Field,
+    MatomoLoader,
   },
   directives: {
     CopyToClipboard,

plugins/CustomDimensions/vue/src/List/List.vue

@@ -14,7 +14,7 @@
       <p v-html="$sanitize(contentIntroText)"></p>
       <p v-show="isLoading">
         <span class="loadingPiwik">
-          <img src="plugins/Morpheus/images/loading-blue.gif" />
+          <MatomoLoader />
           {{ translate('General_LoadingData') }}
         </span>
       </p>
@@ -97,12 +97,13 @@
 import { DeepReadonly, defineComponent } from 'vue';
 import {
   translate,
-  Matomo,
-  MatomoUrl,
-  ContentIntro,
-  EnrichedHeadline,
   ContentBlock,
+  ContentIntro,
   ContentTable,
+  EnrichedHeadline,
+  Matomo,
+  MatomoLoader,
+  MatomoUrl,
 } from 'CoreHome';
 import { ucfirst } from '../utilities';
 import CustomDimensionsStore from '../CustomDimensions.store';
@@ -111,6 +112,7 @@ import { CustomDimension } from '../types';
 export default defineComponent({
   name: 'listcustomdimensions',
   components: {
+    MatomoLoader,
     EnrichedHeadline,
     ContentBlock,
   },

plugins/DBStats/templates/index.twig

@@ -38,7 +38,10 @@
     </div>
     <div class="col s12 m6">
         <div class="ajaxLoad" action="getIndividualReportsSummary">
-            <span class="loadingPiwik"><img src="plugins/Morpheus/images/loading-blue.gif"/>{{ 'General_LoadingData'|translate }}</span>
+            <span class="loadingPiwik">
+                {% include "@CoreHome/_loader.twig" %}
+                {{ 'General_LoadingData'|translate }}
+            </span>
         </div>
     </div>
 </div>
@@ -49,7 +52,10 @@
     </div>
     <div class="col s12 m6">
         <div class="ajaxLoad" action="getIndividualMetricsSummary">
-            <span class="loadingPiwik"><img src="plugins/Morpheus/images/loading-blue.gif"/>{{ 'General_LoadingData'|translate }}</span>
+            <span class="loadingPiwik">
+                {% include "@CoreHome/_loader.twig" %}
+                {{ 'General_LoadingData'|translate }}
+            </span>
         </div>
     </div>
 </div>

plugins/Live/templates/getVisitorProfilePopup.twig

@@ -70,9 +70,10 @@
                 </div>
                 <div class="visitor-profile-more-info">
                     {% if visitorData.lastVisits.getRowsCount() >= constant("Piwik\\Plugins\\Live\\VisitorProfile::VISITOR_PROFILE_MAX_VISITS_TO_SHOW") %}
-                        <a href="#">{{ 'Live_LoadMoreVisits'|translate }}</a> <img class="loadingPiwik"
-                                                                                   style="display:none;"
-                                                                                   src="plugins/Morpheus/images/loading-blue.gif"/>
+                        <a href="#">{{ 'Live_LoadMoreVisits'|translate }}</a>
+                        <span class="loadingPiwik" style="display:none;">
+                            {% include "@CoreHome/_loader.twig" %}
+                        </span>
                     {% else %}
                         <span class="visitor-profile-no-visits">
                             {% if visitorData.hasMoreVisits %}
@@ -91,4 +92,4 @@
             require('piwik/UI').VisitorProfileControl.initElements();
         });
     </script>
-{% endif %}
+{% endif %}

plugins/Login/templates/login.twig

@@ -138,8 +138,8 @@
                                    value="{{ 'General_ChangePassword'|translate }}" tabindex="100"/>
 
                             <span class="loadingPiwik" style="display:none;">
-                            <img alt="Loading" src="plugins/Morpheus/images/loading-blue.gif"/>
-                        </span>
+                                {% include "@CoreHome/_loader.twig" %}
+                            </span>
                         </div>
                     </div>
 

plugins/Marketplace/vue/src/Marketplace/Marketplace.vue

@@ -76,18 +76,20 @@
   </ContentBlock>
 
   <ContentBlock v-if="loading">
-    <img
-      src="plugins/Morpheus/images/loading-blue.gif"
-      :alt="translate('General_LoadingData')"
-    />
+    <MatomoLoader />
     {{ loadingMessage }}
   </ContentBlock>
 </template>
 
 <script lang="ts">
 import { defineComponent, watch } from 'vue';
 import {
-  translate, Matomo, MatomoUrl, AjaxHelper, ContentBlock,
+  translate,
+  AjaxHelper,
+  ContentBlock,
+  Matomo,
+  MatomoLoader,
+  MatomoUrl,
 } from 'CoreHome';
 import { Field } from 'CorePluginsAdmin';
 import PluginList from '../PluginList/PluginList.vue';
@@ -152,8 +154,9 @@ export default defineComponent({
   },
   components: {
     ContentBlock,
-    PluginList,
     Field,
+    MatomoLoader,
+    PluginList,
   },
   data(): MarketplaceState {
     return {

plugins/Morpheus/templates/ajaxMacros.twig

@@ -5,7 +5,7 @@
 {% macro loadingDiv(id='ajaxLoadingDiv') %}
 <div id="{{ id }}" style="display:none;">
     <div class="loadingPiwik">
-        <span class="matomo-loader"><span></span><span></span><span></span></span>
+        {% include "@CoreHome/_loader.twig" %}
         {{ 'General_LoadingData'|translate }}
     </div>
     <div class="loadingSegment">

plugins/Morpheus/tests/UI/Morpheus_spec.js

@@ -18,9 +18,9 @@ describe("Morpheus", function () {
 
     it("should show all UI components and CSS classes", async function() {
         await page.goto(url);
-        await page.waitForSelector('.progressbar img');
+        await page.waitForSelector('.progressbar .matomo-loader');
         await page.evaluate(() => {
-            $('img[src~=loading],.progressbar img').each(function () {
+            $('img[src~=loading],.progressbar .matomo-loader').each(function () {
                 $(this).hide();
             });
         });