Merge branch 'MDL-68417-master' of git://github.com/lameze/moodle

lib/table/amd/src/dynamic.js

@@ -24,6 +24,7 @@
 import {fetch as fetchTableData} from 'core_table/local/dynamic/repository';
 import * as Selectors from 'core_table/local/dynamic/selectors';
 import Events from './local/dynamic/events';
+import {addIconToContainer} from 'core/loadingicon';
 
 let watching = false;
 
@@ -66,6 +67,7 @@ const getFiltersetFromTable = tableRoot => {
  */
 export const refreshTableContent = (tableRoot, resetContent = false) => {
     const filterset = getFiltersetFromTable(tableRoot);
+    addIconToContainer(tableRoot);
 
     return fetchTableData(
         tableRoot.dataset.tableComponent,

lib/tablelib.php

@@ -1645,6 +1645,7 @@ class flexible_table {
         if (is_a($this, \core_table\dynamic::class)) {
             $sortdata = $this->get_sort_order();
             return html_writer::start_tag('div', [
+                'class' => 'table-dynamic position-relative',
                 'data-region' => 'core_table/dynamic',
                 'data-table-handler' => $this->get_handler(),
                 'data-table-component' => $this->get_component(),

theme/boost/scss/moodle/tables.scss

@@ -46,3 +46,14 @@ table {
         caption-side: top;
     }
 }
+
+.table-dynamic .loading-icon {
+    position: absolute;
+    left: calc(50% - 1.5rem);
+    top: 200px;
+    .icon {
+        height: 3rem;
+        width: 3rem;
+        font-size: 3rem;
+    }
+}

theme/boost/style/moodle.css

@@ -17168,6 +17168,15 @@ table caption {
   text-align: left;
   caption-side: top; }
 
+.table-dynamic .loading-icon {
+  position: absolute;
+  left: calc(50% - 1.5rem);
+  top: 200px; }
+  .table-dynamic .loading-icon .icon {
+    height: 3rem;
+    width: 3rem;
+    font-size: 3rem; }
+
 .singlebutton {
   display: inline-block; }
   .singlebutton + .singlebutton {

theme/classic/style/moodle.css

@@ -17400,6 +17400,15 @@ table caption {
   text-align: left;
   caption-side: top; }
 
+.table-dynamic .loading-icon {
+  position: absolute;
+  left: calc(50% - 1.5rem);
+  top: 200px; }
+  .table-dynamic .loading-icon .icon {
+    height: 3rem;
+    width: 3rem;
+    font-size: 3rem; }
+
 .singlebutton {
   display: inline-block; }
   .singlebutton + .singlebutton {