From 2c9f3d0f64f1483af41577bf2ddacd8d57eb8039 Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Mon, 2 Oct 2023 15:44:47 +0200
Subject: [PATCH] wc: replace formatLoadingMessage by loadingTemplate function
 #TASK-5060

---
 .../alignment/gene-coverage-grid.js           |  4 +--
 .../clinical-analysis-audit-browser.js        |  3 ++-
 .../clinical/clinical-analysis-grid.js        |  3 ++-
 .../clinical-interpretation-manager.js        |  3 ++-
 .../clinical/rga/rga-gene-view.js             |  3 ++-
 .../clinical/rga/rga-individual-family.js     |  3 ++-
 .../clinical/rga/rga-individual-view.js       |  3 ++-
 .../clinical/rga/rga-variant-allele-pairs.js  |  3 ++-
 .../clinical/rga/rga-variant-individual.js    |  3 ++-
 .../clinical/rga/rga-variant-view.js          |  3 ++-
 src/webcomponents/cohort/cohort-grid.js       |  6 +++--
 src/webcomponents/commons/grid-commons.js     |  5 +++-
 src/webcomponents/commons/opencga-browser.js  |  4 +--
 .../disease-panel/disease-panel-gene-view.js  |  3 ++-
 .../disease-panel/disease-panel-grid.js       |  6 +++--
 .../disease-panel-region-view.js              |  3 ++-
 src/webcomponents/family/family-grid.js       |  6 +++--
 src/webcomponents/file/file-grid.js           |  6 +++--
 .../individual/individual-grid.js             |  6 +++--
 src/webcomponents/job/job-grid.js             |  6 +++--
 src/webcomponents/sample/sample-grid.js       |  6 +++--
 .../study/admin/study-admin-audit.js          |  3 ++-
 .../study/admin/study-admin-users.js          |  4 +--
 .../permission/permission-browser-grid.js     |  4 +--
 .../knockout-gene-grid.js                     |  3 ++-
 .../knockout-individual-variants.js           |  4 +--
 .../knockout-individual-view.js               |  3 ++-
 .../knockout-variant-allele-pairs.js          |  4 +--
 .../knockout-variant-individual.js            |  4 +--
 .../knockout-variant-view.js                  |  3 ++-
 .../deprecated/interpretation-history.js      |  3 ++-
 .../variant-interpreter-grid.js               |  7 ++---
 .../variant-interpreter-rearrangement-grid.js |  8 +++---
 .../variant/variant-browser-grid.js           |  6 +++--
 .../variant/variant-cohort-stats-grid.js      | 26 +++++++++----------
 src/webcomponents/variant/variant-samples.js  |  3 ++-
 36 files changed, 105 insertions(+), 68 deletions(-)

diff --git a/src/webcomponents/alignment/gene-coverage-grid.js b/src/webcomponents/alignment/gene-coverage-grid.js
index 77f16707b8..0ff39bb50d 100644
--- a/src/webcomponents/alignment/gene-coverage-grid.js
+++ b/src/webcomponents/alignment/gene-coverage-grid.js
@@ -112,7 +112,7 @@ export default class GeneCoverageGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () =>"<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPageChange: (page, size) => {
                 const result = this.gridCommons.onPageChange(page, size);
@@ -149,7 +149,7 @@ export default class GeneCoverageGrid extends LitElement {
                     pageList: this._config.pageList,
                     showExport: this._config.showExport,
                     // detailView: this._config.detailView,
-                    formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                    loadingTemplate: () => this.gridCommons.loadingFormatter(),
                     ajax: params => {
                         this.opencgaSession.opencgaClient.alignments().statsCoverage(this.file, this.geneIds, {study: this.opencgaSession.study.fqn})
                             .then(restResponse => {
diff --git a/src/webcomponents/clinical/clinical-analysis-audit-browser.js b/src/webcomponents/clinical/clinical-analysis-audit-browser.js
index 6cdd4779a6..44a2fb397f 100644
--- a/src/webcomponents/clinical/clinical-analysis-audit-browser.js
+++ b/src/webcomponents/clinical/clinical-analysis-audit-browser.js
@@ -236,7 +236,8 @@ class ClinicalAnalysisAuditBrowser extends LitElement {
             paginationVAlign: "both",
             formatShowingRows: this.gridCommons.formatShowingRows,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement)
         });
     }
diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js
index d33858d762..e2a61b2a89 100644
--- a/src/webcomponents/clinical/clinical-analysis-grid.js
+++ b/src/webcomponents/clinical/clinical-analysis-grid.js
@@ -139,7 +139,8 @@ export default class ClinicalAnalysisGrid extends LitElement {
                 showExport: this._config.showExport,
                 detailView: this._config.detailView,
                 gridContext: this,
-                formatLoadingMessage: () =>"<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () =>"<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     let response = null;
                     this.filters = {
diff --git a/src/webcomponents/clinical/interpretation/clinical-interpretation-manager.js b/src/webcomponents/clinical/interpretation/clinical-interpretation-manager.js
index eff0bbd407..e6d5093d0b 100644
--- a/src/webcomponents/clinical/interpretation/clinical-interpretation-manager.js
+++ b/src/webcomponents/clinical/interpretation/clinical-interpretation-manager.js
@@ -227,7 +227,8 @@ export default class ClinicalInterpretationManager extends LitElement {
             sidePagination: "local",
             pagination: true,
             formatNoMatches: () => "No previous versions",
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
         });
     }
diff --git a/src/webcomponents/clinical/rga/rga-gene-view.js b/src/webcomponents/clinical/rga/rga-gene-view.js
index 032510fc3f..627b4cc741 100644
--- a/src/webcomponents/clinical/rga/rga-gene-view.js
+++ b/src/webcomponents/clinical/rga/rga-gene-view.js
@@ -127,7 +127,8 @@ export default class RgaGeneView extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             detailFormatter: this._config.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: async params => {
                 const _filters = {
                     study: this.opencgaSession.study.fqn,
diff --git a/src/webcomponents/clinical/rga/rga-individual-family.js b/src/webcomponents/clinical/rga/rga-individual-family.js
index 4c9e769ab9..9529a0a651 100644
--- a/src/webcomponents/clinical/rga/rga-individual-family.js
+++ b/src/webcomponents/clinical/rga/rga-individual-family.js
@@ -165,7 +165,8 @@ export default class RgaIndividualFamily extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             detailFormatter: this._config.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: async params => {
                 const _filters = {
                     study: this.opencgaSession.study.fqn,
diff --git a/src/webcomponents/clinical/rga/rga-individual-view.js b/src/webcomponents/clinical/rga/rga-individual-view.js
index e3a379328a..c6116193c7 100644
--- a/src/webcomponents/clinical/rga/rga-individual-view.js
+++ b/src/webcomponents/clinical/rga/rga-individual-view.js
@@ -155,7 +155,8 @@ export default class RgaIndividualView extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             detailFormatter: this._config.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: async params => {
                 const _filters = {
                     study: this.opencgaSession.study.fqn,
diff --git a/src/webcomponents/clinical/rga/rga-variant-allele-pairs.js b/src/webcomponents/clinical/rga/rga-variant-allele-pairs.js
index b9b7ea1df6..445f9654ad 100644
--- a/src/webcomponents/clinical/rga/rga-variant-allele-pairs.js
+++ b/src/webcomponents/clinical/rga/rga-variant-allele-pairs.js
@@ -155,7 +155,8 @@ export default class RgaVariantAllelePairs extends LitElement {
             paginationVAlign: "both",
             // formatShowingRows: this.gridCommons.formatShowingRows,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: async params => {
                 try {
                     const pageNumber = this.table.bootstrapTable("getOptions").pageNumber || this.table.bootstrapTable("getOptions").pageNumber === 1;
diff --git a/src/webcomponents/clinical/rga/rga-variant-individual.js b/src/webcomponents/clinical/rga/rga-variant-individual.js
index 88bcf0cd58..8bd97eecae 100644
--- a/src/webcomponents/clinical/rga/rga-variant-individual.js
+++ b/src/webcomponents/clinical/rga/rga-variant-individual.js
@@ -117,7 +117,8 @@ export default class RgaVariantIndividual extends LitElement {
             paginationVAlign: "both",
             formatShowingRows: (pageFrom, pageTo, totalRows) => this.formatShowingRows(pageFrom, pageTo, totalRows),
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: async params => {
                 try {
                     const _filters = {
diff --git a/src/webcomponents/clinical/rga/rga-variant-view.js b/src/webcomponents/clinical/rga/rga-variant-view.js
index 3d2c7a6085..2ade60f839 100644
--- a/src/webcomponents/clinical/rga/rga-variant-view.js
+++ b/src/webcomponents/clinical/rga/rga-variant-view.js
@@ -491,7 +491,8 @@ export default class RgaVariantView extends LitElement {
             paginationVAlign: "both",
             formatShowingRows: (pageFrom, pageTo, totalRows) => this.formatShowingRows(pageFrom, pageTo, totalRows),
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: params => {
                 const _filters = {
                     study: this.opencgaSession.study.fqn,
diff --git a/src/webcomponents/cohort/cohort-grid.js b/src/webcomponents/cohort/cohort-grid.js
index e024f934da..26b2a53f1b 100644
--- a/src/webcomponents/cohort/cohort-grid.js
+++ b/src/webcomponents/cohort/cohort-grid.js
@@ -163,7 +163,8 @@ export default class CohortGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPostBody: data => {
                 // We call onLoadSuccess to select first row
@@ -209,7 +210,8 @@ export default class CohortGrid extends LitElement {
                 showExport: this._config.showExport,
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     const sort = this.table.bootstrapTable("getOptions").sortName ? {
                         sort: this.table.bootstrapTable("getOptions").sortName,
diff --git a/src/webcomponents/commons/grid-commons.js b/src/webcomponents/commons/grid-commons.js
index fa6a99fddc..6af519c421 100644
--- a/src/webcomponents/commons/grid-commons.js
+++ b/src/webcomponents/commons/grid-commons.js
@@ -18,7 +18,6 @@ import UtilsNew from "../../core/utils-new.js";
 import CustomActions from "./custom-actions.js";
 import ExtensionsManager from "../extensions-manager.js";
 
-
 export default class GridCommons {
 
     static GRID_ICONS_PREFIX = "fas";
@@ -307,4 +306,8 @@ export default class GridCommons {
         return columns;
     }
 
+    loadingFormatter() {
+        return "<div style='margin-top:5%'><loading-spinner></loading-spinner></div>";
+    }
+
 }
diff --git a/src/webcomponents/commons/opencga-browser.js b/src/webcomponents/commons/opencga-browser.js
index 8783481477..9c0ac7f472 100644
--- a/src/webcomponents/commons/opencga-browser.js
+++ b/src/webcomponents/commons/opencga-browser.js
@@ -362,7 +362,7 @@ export default class OpencgaBrowser extends LitElement {
                     .icon="${this._config.icon}">
                 </tool-header>
             ` : null}
-            <div class="row">
+            <div class="d-flex gap-4">
                 <div class="col-2">
                     <div class="d-grid gap-2 pb-3">
                         <button type="button" class="btn btn-primary" @click="${this.onRun}">
@@ -403,7 +403,7 @@ export default class OpencgaBrowser extends LitElement {
                         ${this.renderAggregation()}
                     </div>
                 </div>
-                <div class="col-10">
+                <div class="flex-grow-1">
                     ${this.renderButtonViews()}
                     <div>
                         <opencga-active-filters
diff --git a/src/webcomponents/disease-panel/disease-panel-gene-view.js b/src/webcomponents/disease-panel/disease-panel-gene-view.js
index d655e19ecb..3fb23528e2 100644
--- a/src/webcomponents/disease-panel/disease-panel-gene-view.js
+++ b/src/webcomponents/disease-panel/disease-panel-gene-view.js
@@ -101,7 +101,8 @@ export default class DiseasePanelGeneView extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             // onPageChange: (page, size) => {
             //     const result = this.gridCommons.onPageChange(page, size);
diff --git a/src/webcomponents/disease-panel/disease-panel-grid.js b/src/webcomponents/disease-panel/disease-panel-grid.js
index e307e9b571..810f74d2a9 100644
--- a/src/webcomponents/disease-panel/disease-panel-grid.js
+++ b/src/webcomponents/disease-panel/disease-panel-grid.js
@@ -177,7 +177,8 @@ export default class DiseasePanelGrid extends LitElement {
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
                 gridContext: this,
-                formatLoadingMessage: () => String.raw`<div><loading-spinner></loading-spinner></div>`,
+                // formatLoadingMessage: () => String.raw`<div><loading-spinner></loading-spinner></div>`,
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: async params => {
                     this.filters = {
                         study: this.opencgaSession.study.fqn,
@@ -263,7 +264,8 @@ export default class DiseasePanelGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             // onPageChange: (page, size) => {
             //     const result = this.gridCommons.onPageChange(page, size);
diff --git a/src/webcomponents/disease-panel/disease-panel-region-view.js b/src/webcomponents/disease-panel/disease-panel-region-view.js
index 2a86fe08b3..dce753eb71 100644
--- a/src/webcomponents/disease-panel/disease-panel-region-view.js
+++ b/src/webcomponents/disease-panel/disease-panel-region-view.js
@@ -98,7 +98,8 @@ export default class DiseasePanelRegionView extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             // onPageChange: (page, size) => {
             //     const result = this.gridCommons.onPageChange(page, size);
diff --git a/src/webcomponents/family/family-grid.js b/src/webcomponents/family/family-grid.js
index 817ab67514..e07421b2ba 100644
--- a/src/webcomponents/family/family-grid.js
+++ b/src/webcomponents/family/family-grid.js
@@ -176,7 +176,8 @@ export default class FamilyGrid extends LitElement {
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
                 gridContext: this,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     const sort = this.table.bootstrapTable("getOptions").sortName ? {
                         sort: this.table.bootstrapTable("getOptions").sortName,
@@ -292,7 +293,8 @@ export default class FamilyGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPostBody: data => {
                 // We call onLoadSuccess to select first row
diff --git a/src/webcomponents/file/file-grid.js b/src/webcomponents/file/file-grid.js
index 42b1c420de..3477e0c429 100644
--- a/src/webcomponents/file/file-grid.js
+++ b/src/webcomponents/file/file-grid.js
@@ -151,7 +151,8 @@ export default class OpencgaFileGrid extends LitElement {
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
                 gridContext: this,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     this.filters = {
                         study: this.opencgaSession.study.fqn,
@@ -241,7 +242,8 @@ export default class OpencgaFileGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPageChange: (page, size) => {
                 const result = this.gridCommons.onPageChange(page, size);
diff --git a/src/webcomponents/individual/individual-grid.js b/src/webcomponents/individual/individual-grid.js
index c65d5662e6..8b3cb7ba59 100644
--- a/src/webcomponents/individual/individual-grid.js
+++ b/src/webcomponents/individual/individual-grid.js
@@ -176,7 +176,8 @@ export default class IndividualGrid extends LitElement {
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
                 gridContext: this,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     const sort = this.table.bootstrapTable("getOptions").sortName ? {
                         sort: this.table.bootstrapTable("getOptions").sortName,
@@ -291,7 +292,8 @@ export default class IndividualGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPostBody: data => {
                 // We call onLoadSuccess to select first row
diff --git a/src/webcomponents/job/job-grid.js b/src/webcomponents/job/job-grid.js
index 15776aefcc..893179b145 100644
--- a/src/webcomponents/job/job-grid.js
+++ b/src/webcomponents/job/job-grid.js
@@ -172,7 +172,8 @@ export default class JobGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPostBody: data => {
                 // We call onLoadSuccess to select first row
@@ -231,7 +232,8 @@ export default class JobGrid extends LitElement {
                 sortName: "Creation",
                 sortOrder: "asc",
                 gridContext: this,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     document.getElementById(this._prefix + "refreshIcon").style.visibility = "visible";
                     this.filters = {
diff --git a/src/webcomponents/sample/sample-grid.js b/src/webcomponents/sample/sample-grid.js
index 7ef27793bd..f62794934b 100644
--- a/src/webcomponents/sample/sample-grid.js
+++ b/src/webcomponents/sample/sample-grid.js
@@ -175,7 +175,8 @@ export default class SampleGrid extends LitElement {
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
                 gridContext: this,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     this.filters = {
                         study: this.opencgaSession.study.fqn,
@@ -288,7 +289,8 @@ export default class SampleGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPostBody: data => {
                 // We call onLoadSuccess to select first row
diff --git a/src/webcomponents/study/admin/study-admin-audit.js b/src/webcomponents/study/admin/study-admin-audit.js
index fd1d6010ee..99ec0e2c49 100644
--- a/src/webcomponents/study/admin/study-admin-audit.js
+++ b/src/webcomponents/study/admin/study-admin-audit.js
@@ -146,7 +146,8 @@ export default class StudyAdminAudit extends LitElement {
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
                 gridContext: this,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     const query = {
                         study: this.study.fqn,
diff --git a/src/webcomponents/study/admin/study-admin-users.js b/src/webcomponents/study/admin/study-admin-users.js
index 1c3a831799..ef0ea3d34c 100644
--- a/src/webcomponents/study/admin/study-admin-users.js
+++ b/src/webcomponents/study/admin/study-admin-users.js
@@ -147,8 +147,8 @@ export default class StudyAdminUsers extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             // detailFormatter: this.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
-
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPostBody: data => {
                 // We call onLoadSuccess to select first row
diff --git a/src/webcomponents/study/permission/permission-browser-grid.js b/src/webcomponents/study/permission/permission-browser-grid.js
index 86e2aadf31..d0bf0f22c8 100644
--- a/src/webcomponents/study/permission/permission-browser-grid.js
+++ b/src/webcomponents/study/permission/permission-browser-grid.js
@@ -138,8 +138,8 @@ export default class PermissionBrowserGrid extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             // detailFormatter: this.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
-
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPostBody: data => {
                 // We call onLoadSuccess to select first row
diff --git a/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-gene-grid.js b/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-gene-grid.js
index 8040200e91..3daae82ee6 100644
--- a/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-gene-grid.js
+++ b/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-gene-grid.js
@@ -124,7 +124,8 @@ export default class KnockoutGeneGrid extends LitElement {
                         params.error(e);
                     });
             },
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => this.gridCommons.onClickRow(row.id, row, selectedElement)
         });
     }
diff --git a/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-individual-variants.js b/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-individual-variants.js
index 095bae9f09..a18abb4426 100644
--- a/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-individual-variants.js
+++ b/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-individual-variants.js
@@ -20,7 +20,6 @@ import GridCommons from "../../../../commons/grid-commons.js";
 import "../../../../commons/view/detail-tabs.js";
 import knockoutDataIndividuals from "../test/knockout.20201103172343.kFIvpr.individuals.js";
 
-
 export default class KnockoutIndividualVariants extends LitElement {
 
     constructor() {
@@ -91,7 +90,8 @@ export default class KnockoutIndividualVariants extends LitElement {
             paginationVAlign: "both",
             // formatShowingRows: this.gridCommons.formatShowingRows,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => {
             },
             onLoadSuccess: data => {
diff --git a/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-individual-view.js b/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-individual-view.js
index 23ff9c3ecb..7bfb94d9fe 100644
--- a/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-individual-view.js
+++ b/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-individual-view.js
@@ -124,7 +124,8 @@ export default class KnockoutIndividualView extends LitElement {
                         params.error(e);
                     });
             },
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => {
                 this.individual = {id: row.sampleId, ...row}; // TODO temp fix for missing id;
                 this.gridCommons.onClickRow(row.id, row, selectedElement);
diff --git a/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-variant-allele-pairs.js b/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-variant-allele-pairs.js
index 2a1ca659f6..84c3baca5c 100644
--- a/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-variant-allele-pairs.js
+++ b/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-variant-allele-pairs.js
@@ -20,7 +20,6 @@ import GridCommons from "../../../../commons/grid-commons.js";
 import "../../../../commons/view/detail-tabs.js";
 import knockoutDataIndividuals from "../test/knockout.20201103172343.kFIvpr.individuals.js";
 
-
 export default class KnockoutVariantAllelePairs extends LitElement {
 
     constructor() {
@@ -85,7 +84,8 @@ export default class KnockoutVariantAllelePairs extends LitElement {
             paginationVAlign: "both",
             // formatShowingRows: this.gridCommons.formatShowingRows,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => {
             },
             onLoadSuccess: data => {
diff --git a/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-variant-individual.js b/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-variant-individual.js
index dbd601d713..53d3365f73 100644
--- a/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-variant-individual.js
+++ b/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-variant-individual.js
@@ -20,7 +20,6 @@ import GridCommons from "../../../../commons/grid-commons.js";
 import "../../../../commons/view/detail-tabs.js";
 import knockoutDataIndividuals from "../test/knockout.20201103172343.kFIvpr.individuals.js";
 
-
 export default class KnockoutVariantIndividual extends LitElement {
 
     constructor() {
@@ -88,7 +87,8 @@ export default class KnockoutVariantIndividual extends LitElement {
             paginationVAlign: "both",
             // formatShowingRows: this.gridCommons.formatShowingRows,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => {
             },
             onLoadSuccess: data => {
diff --git a/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-variant-view.js b/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-variant-view.js
index 5742c9e385..12983d0e65 100644
--- a/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-variant-view.js
+++ b/src/webcomponents/variant/analysis/deprecated/opencga-knockout-analysis/knockout-variant-view.js
@@ -227,7 +227,8 @@ export default class KnockoutVariantView extends LitElement {
                         params.error(e);
                     });
             },
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => {
                 console.log(row);
                 this.variant = row;
diff --git a/src/webcomponents/variant/deprecated/interpretation-history.js b/src/webcomponents/variant/deprecated/interpretation-history.js
index 9c2de9ce1e..d6a1b53c24 100644
--- a/src/webcomponents/variant/deprecated/interpretation-history.js
+++ b/src/webcomponents/variant/deprecated/interpretation-history.js
@@ -132,7 +132,8 @@ class InterpretationHistory extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () =>"<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () =>"<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPageChange: (page, size) => {
                 const result = this.gridCommons.onPageChange(page, size);
diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid.js
index 2b7c12d6e7..f2b9a19e8e 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-grid.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid.js
@@ -300,7 +300,8 @@ export default class VariantInterpreterGrid extends LitElement {
                 showExport: this._config.showExport,
                 detailView: this._config.detailView,
                 detailFormatter: (value, row) => this.detailFormatter(value, row),
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
 
                 // this makes the opencga-interpreted-variant-grid properties available in the bootstrap-table formatters
                 variantGrid: this,
@@ -477,8 +478,8 @@ export default class VariantInterpreterGrid extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             detailFormatter: (value, row) => this.detailFormatter(value, row),
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
-
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             // this makes the opencga-interpreted-variant-grid properties available in the bootstrap-table formatters
             variantGrid: this,
 
diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js b/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js
index 900062e5ab..7ba2d67887 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js
@@ -248,8 +248,8 @@ export default class VariantInterpreterRearrangementGrid extends LitElement {
                 showExport: this._config.showExport,
                 // detailView: this._config.detailView,
                 // detailFormatter: this.detailFormatter,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
-
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 // this makes the opencga-interpreted-variant-grid properties available in the bootstrap-table formatters
                 variantGrid: this,
 
@@ -331,8 +331,8 @@ export default class VariantInterpreterRearrangementGrid extends LitElement {
             showExport: this._config.showExport,
             // detailView: this._config.detailView,
             // detailFormatter: this.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
-
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             // this makes the opencga-interpreted-variant-grid properties available in the bootstrap-table formatters
             variantGrid: this,
 
diff --git a/src/webcomponents/variant/variant-browser-grid.js b/src/webcomponents/variant/variant-browser-grid.js
index ca0e83ac7b..6817e3112e 100644
--- a/src/webcomponents/variant/variant-browser-grid.js
+++ b/src/webcomponents/variant/variant-browser-grid.js
@@ -194,7 +194,8 @@ export default class VariantBrowserGrid extends LitElement {
                 showExport: this._config.showExport,
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
-                formatLoadingMessage: () => "<loading-spinner></loading-spinner>",
+                // formatLoadingMessage: () => "<loading-spinner></loading-spinner>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 // this makes the variant-browser-grid properties available in the bootstrap-table detail formatter
                 variantGrid: this,
                 ajax: params => {
@@ -338,7 +339,8 @@ export default class VariantBrowserGrid extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             detailFormatter: this._config.detailFormatter,
-            formatLoadingMessage: () => "<loading-spinner></loading-spinner>",
+            // formatLoadingMessage: () => "<loading-spinner></loading-spinner>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             // this makes the variant-browser-grid properties available in the bootstrap-table detail formatter
             variantGrid: this,
             onClickRow: (row, $element) => {
diff --git a/src/webcomponents/variant/variant-cohort-stats-grid.js b/src/webcomponents/variant/variant-cohort-stats-grid.js
index 9b88d90e0f..14fcdb36aa 100644
--- a/src/webcomponents/variant/variant-cohort-stats-grid.js
+++ b/src/webcomponents/variant/variant-cohort-stats-grid.js
@@ -17,7 +17,6 @@
 import {LitElement, html} from "lit";
 import UtilsNew from "../../core/utils-new.js";
 
-
 class VariantCohortStatsGrid extends LitElement {
 
     constructor() {
@@ -76,9 +75,9 @@ class VariantCohortStatsGrid extends LitElement {
                 pagination: _this._config.pagination,
                 pageSize: _this._config.pageSize,
                 pageList: _this._config.pageList,
-                formatLoadingMessage: () =>"<loading-spinner></loading-spinner>",
-
-                onLoadError: function(status, res) {
+                // formatLoadingMessage: () =>"<loading-spinner></loading-spinner>",
+                loadingTemplate: () => "<div style='margin-top:5%'><loading-spinner></loading-spinner></div>",
+                onLoadError: function (status, res) {
                     console.log(status);
                     console.log(res);
                     console.trace();
@@ -90,7 +89,7 @@ class VariantCohortStatsGrid extends LitElement {
     // FIXME numSamples is coming son to data model, remove this formatter
     numSamplesFormatter(value, row, index) {
         let total = 0;
-        for (let genotype of Object.keys(row.genotypeCount)) {
+        for (const genotype of Object.keys(row.genotypeCount)) {
             total += row.genotypeCount[genotype];
         }
         return total;
@@ -98,12 +97,12 @@ class VariantCohortStatsGrid extends LitElement {
 
     filterFormatter(value, row, index) {
         let content = "";
-        for (let filter of Object.keys(row.filterFreq)) {
+        for (const filter of Object.keys(row.filterFreq)) {
             let fixedFreq = row.filterFreq[filter];
             if (fixedFreq !== 0 && fixedFreq !== 1) {
                 fixedFreq = Number(fixedFreq).toFixed(4);
             }
-            let s = `<span style="padding-right: 20px">${filter}</span><span>${fixedFreq} (${row.filterCount[filter]})</span><br>`;
+            const s = `<span style="padding-right: 20px">${filter}</span><span>${fixedFreq} (${row.filterCount[filter]})</span><br>`;
             // PASS must be the first element
             if (filter === "PASS") {
                 content = s + content;
@@ -146,21 +145,21 @@ class VariantCohortStatsGrid extends LitElement {
                 count = row.genotypeCount["1/1"];
                 break;
         }
-        let fixedFreq = (freq !== 0 && freq !== 1) ? Number(freq).toFixed(4) : freq;
+        const fixedFreq = (freq !== 0 && freq !== 1) ? Number(freq).toFixed(4) : freq;
         return `${fixedFreq} (${count})`;
     }
 
     othersFormatter(value, row, index) {
         let str = "";
-        for (let genotype of Object.keys(row.genotypeFreq)) {
+        for (const genotype of Object.keys(row.genotypeFreq)) {
             if (genotype !== "0/0" && genotype !== "0/1" && genotype !== "1/1") {
-                let freq = row.genotypeFreq[genotype];
-                let count = row.genotypeCount[genotype];
-                let fixedFreq = (freq !== 0 && freq !== 1) ? Number(freq).toFixed(4) : freq;
+                const freq = row.genotypeFreq[genotype];
+                const count = row.genotypeCount[genotype];
+                const fixedFreq = (freq !== 0 && freq !== 1) ? Number(freq).toFixed(4) : freq;
                 str += `${fixedFreq} (${count})<br>`;
             }
         }
-        return str !== "" ? str:  "NA";
+        return str !== "" ? str: "NA";
     }
 
     _createDefaultColumns() {
@@ -291,6 +290,7 @@ class VariantCohortStatsGrid extends LitElement {
             </div>
         `;
     }
+
 }
 
 customElements.define("variant-cohort-stats-grid", VariantCohortStatsGrid);
diff --git a/src/webcomponents/variant/variant-samples.js b/src/webcomponents/variant/variant-samples.js
index 9c2a638006..18c5d6f449 100644
--- a/src/webcomponents/variant/variant-samples.js
+++ b/src/webcomponents/variant/variant-samples.js
@@ -134,7 +134,8 @@ export default class VariantSamples extends LitElement {
             icons: GridCommons.GRID_ICONS,
             columns: this.getColumns(),
             formatShowingRows: this.gridCommons.formatShowingRows,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: async params => {
                 const tableOptions = this.table.bootstrapTable("getOptions");
                 const query = {