issue #1206 - fix 'loading', replace and delete spinner.gif

analysis/templates/analysis/trio_wizard.html

@@ -178,7 +178,7 @@ <h3 id='trio-title'>Create Trio Wizard</h3>
             <button id='create-trio-button' class="btn btn-primary"><i class="fas fa-plus-circle"></i> Create Trio</button>
         </form>
         <div id='form-submitted-dialog'>
-            <div><img src="{% static 'images/spinner.gif' %}" /> Creating Trio...</div>
+            <div><i class="fa fa-spinner"></i> Creating Trio...</div>
             <div class="TrioNode"></div>
             <div id='proband-description'>
                 <div id='proband-text'></div>

annotation/templates/annotation/annotation_detail.html

@@ -163,7 +163,7 @@
             {% labelled label=cwr.name %}
                 <div class='cached-web-resource-container'>
                 {% if cwr.import_status == 'I' %}
-                    <img src="{% static 'images/spinner.gif' %}" /> <b>Import started: </b>{{ cwr.import_date }}
+                    <i class="fa fa-spinner"></i> <b>Import started: </b>{{ cwr.import_date }}
                 {% else %}
                     {% if user.is_superuser %}
                         {% if cwr.import_status != 'S' %}
@@ -194,9 +194,8 @@
             type: "POST",
             url: Urls.load_cached_web_resource(cwr_name),
             success: function(data) {
-                const img = $("<img />").attr("src", "{% static 'images/spinner.gif' %}");
                 const container = loadButton.parent(".cached-web-resource-container");
-                container.empty().append(img);
+                container.html('<i class="fa fa-spinner"></i>');
             }
         });
     });

genes/templates/genes/coverage/qc_coverage.html

@@ -32,8 +32,7 @@
         const GENOME_BUILD = "{{ genome_build.name }}";
 
         function load_graph(url) {
-            const loading_icon = $('<label>').attr({class : 'loading icon32', style: 'margin-right:10px;'});
-            gcContainer.html(loading_icon);
+            gcContainer.html('<i class="fa fa-spinner"></i>');
             gcContainer.load(url);
         }
 

genes/templates/genes/view_gene_symbol.html

@@ -141,8 +141,7 @@
 
             {% if has_gene_coverage and url_name_visible.gene_symbol_coverage_collection_graphs %}
                 let gcContainer = $("#qc-gene-coverage-graph-container");
-                let loading_icon = $('<div>').attr({class : 'loading', style: 'margin-right:10px;'});
-                gcContainer.html(loading_icon);
+                gcContainer.html('<i class="fa fa-spinner"></i>');
                 gcContainer.load("{% url 'gene_symbol_coverage_collection_graphs' genome_build.name gene_symbol.pk %}");
             {% endif %}
 

pedigree/templates/pedigree/view_pedigree.html

@@ -35,8 +35,7 @@
 	function poll_pedigree_task(celery_task) {
 		$('#launch-task').hide();
 		var task_info = $('#task-info');
-		var loading_icon = $('<div>').attr({class : 'loading', style: 'margin-right:10px;'});
-		task_info.html(loading_icon);
+		task_info.html('<i class="fa fa-spinner"></i>');
 		task_info.append("Pedigree Inheritance task is running...");
 
 		$('#task-info').show();

snpdb/templates/snpdb/patients/cohort_gene_counts.html

@@ -9,8 +9,7 @@
     const gcContainer = $("#cohort-gene-counts-graph-container");
 
     function load_graph(url) {
-        const loading_icon = $('<div>').attr({class: 'loading icon16', style: 'margin-right:10px;'});
-        gcContainer.html(loading_icon);
+        gcContainer.html('<i class="fa fa-spinner"></i>');
         gcContainer.load(url);
     }
 

snpdb/templates/snpdb/tags/wiki_tag.html

@@ -81,7 +81,7 @@
 
 <div id='wiki-{{ uuid }}'>
     <div class="hidden editSection"></div>
-    <span class='hidden saving-message'><img src="{% static 'images/spinner.gif' %}" /> Saving...</span>
+    <span class='hidden saving-message'><i class="fa fa-spinner"></i> Saving...</span>
     <span class="hidden saved-message"></span>
     <button class='btn btn-outline-primary hidden wiki-save'>save wiki</button>
     {% if has_write_permission %}

snpdb/templates/snpdb/wait_for_task.html

@@ -18,7 +18,7 @@
 {% if async_result.result and not async_result.successful %}
     The Job {{ async_result.id }} exited with status {{ async_result.status }}.
 {% else %}
-<img src="{% static 'images/spinner.gif' %}" />
+<i class="fa fa-spinner"></i>
 {% endif %}
 
 </div>

variantgrid/static_files/default_static/js/grid.js

@@ -30,7 +30,7 @@ function load_variant_details(variant_id) {
         }
     }
     let editorContainer = $("#node-editor-container");
-    editorContainer.html('<div class="editor-loading"><img src="/static/images/spinner.gif" /> Loading variant details...</div>');
+    editorContainer.html('<div class="editor-loading"><i class="fa fa-spinner"></i> Loading variant details...</div>');
     editorContainer.load(variant_details_url);
 }
 

variantopedia/templates/variantopedia/dashboard.html

@@ -32,7 +32,7 @@
             <script>
             $(document).ready(function() {
                 var myCases = $("#my-cases");
-                myCases.html('<div class="cases-loading"><img src="{% static 'images/spinner.gif' %}" /> Loading cases...</div>');
+                myCases.html('<i class="fa fa-spinner"></i> Loading cases...');
                 myCases.load("{% url 'my_cases_tab' %}");
             });
             </script>

variantopedia/templates/variantopedia/variant_details.html

@@ -323,7 +323,7 @@
     $("#variant-canonical-c-hgvs").text(data.link_data.canonical_c_hgvs);
 
     let clinGenId = $("#clingen-allele-id");
-    clinGenId.removeClass("loading");
+    clinGenId.empty(); // clear loading
     let clinGenDetails;
     if (data.error) {
         let error_message = `ClinGeneAllele API Error: ${data.error.errorType} (${data.error.description}) for input '${data.error.inputLine}'`;
@@ -867,8 +867,9 @@ <h4>Tags</h4>
                 <div class="card">
                     <div class="card-header">External IDs</div>
                     <div class="card-body">
-                        <!-- note this used to have css class of "loading" -->
-                        {% labelled id="clingen-allele-id" label="ClinGen" help=annotation_description.clingen_allele hint="tiny" %}{% endlabelled %}
+                        {% labelled id="clingen-allele-id" label="ClinGen" help=annotation_description.clingen_allele hint="tiny" %}
+                            <i class="fa fa-spinner"></i>
+                        {% endlabelled %}
                     {% if variant_annotation.has_cosmic %}
                         {% labelled id='cosmic_id' label='COSMIC Genomic Mutation ID' help=annotation_description.cosmic_id hint="tiny" %}{{ variant_annotation.cosmic_id }}{% endlabelled %}
                         {% labelled id='cosmic_legacy_id' label='COSMIC Legacy ID' help=annotation_description.cosmic_legacy_id hint="tiny" %}{{ variant_annotation.cosmic_legacy_id }}{% endlabelled %}
@@ -913,7 +914,7 @@ <h4>Tags</h4>
 
                         <div id='pubmed-citations' class="citations mb-4">
                             <div id='pubmed-loading'>
-                                <img src="{% static 'images/spinner.gif' %}" /> Loading citations...
+                                <i class="fa fa-spinner"></i> Loading citations...
                             </div>
                         </div>
 
@@ -961,15 +962,15 @@ <h4>Canonical Transcripts</h4>
         {% if seqauto_enabled and show_gene_coverage %}
         <div id="gene_coverage">
             <!-- todo convert to bootstrap spinner -->
-            <img src="{% static 'images/spinner.gif' %}" /> Checking for gene coverage...
+            <i class="fa fa-spinner"></i> Checking for gene coverage...
         </div>
         {% endif %}
 
     {% endif %}
 {% endif %}
 {% if show_samples %}
 <div id="variant_sample_information" class="container-table">
-	<img src="{% static 'images/spinner.gif' %}" /> Checking for sample information about this variant...
+    <i class="fa fa-spinner"></i> Checking for sample information about this variant...
 </div>
 {% endif %}