feat: new custom loading animation (#1314)

Author: jstucke

src/web_interface/static/fact_loading.svg

@@ -1,9 +1,20 @@
 function showImg() {
     $('#form').hide();
-    $('#loading_img').css({'display': 'block'});
+    $('#loading-img').css({'display': 'block'});
 }
 
 function hideImg() {
     $('#form').show();
-    $('#loading_img').css({'display': 'none'});
+    $('#loading-img').css({'display': 'none'});
+}
+
+function loadLoadingAnimation(elementId) {
+    fetch("/static/fact_loading.svg")
+    .then(response => response.text())
+    .then(data => {
+        document.getElementById(elementId).innerHTML = data;
+    })
+    .catch(error => {
+        console.error('Error loading loading animation:', error);
+    });
 }

src/web_interface/static/js/loading.js

@@ -67,13 +67,11 @@ <h3 class="mb-3">Search Firmware Database</h3>
             </div>
 
 
-            <button type="submit" value=submit class="btn btn-primary" id="input_submit" onclick="showImg()">
+            <button type="submit" value=submit class="btn btn-primary" id="input_submit">
                 <i class="fas fa-search"></i> Search
             </button>
 
         </form>
-
-        <img id="loading_img" src="{{ url_for('.static', filename='Pacman.gif') }}" style="display: none; margin: auto;"/>
     </div>
 </div>
 

src/web_interface/templates/database/database_search.html

@@ -29,6 +29,7 @@
             }
         });
     </script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/loading.js') }}"></script>
 
     <style>
         {# styling for file preview line lumbers #}
@@ -119,9 +120,11 @@ <h3>
 
                     <div id="summary-div">
                         <div class="mb-3 border" id="loading-summary-gif" style="display: none; padding: 5px; text-align: center">
-                            <img src="{{ url_for("static", filename = "Pacman.gif") }}" alt="loading gif">
                             <p>Loading summary for included files...</p>
                         </div>
+                        <script>
+                            loadLoadingAnimation('loading-summary-gif');
+                        </script>
                     </div>
                     <script type="text/javascript" src="{{ url_for('static', filename='js/show_analysis_summary.js') }}"></script>
 

src/web_interface/templates/show_analysis.html

@@ -39,8 +39,10 @@
                     </div>
                 </div>
                 <div id="preview-loading-gif" class="border" style="display: block; padding: 5px; text-align: center">
-                    <img src="{{ url_for('static', filename = 'Pacman.gif') }}" alt="loading...">
                 </div>
+                <script>
+                    loadLoadingAnimation('preview-loading-gif');
+                </script>
                 <div id="preview-content" class="m-0 mt-2 p-0"></div>
             </div>
 

src/web_interface/templates/show_analysis/preview.j2

@@ -178,8 +178,12 @@ <h3 class="mb-3">Upload Firmware</h3>
                 </form>
             </div>
 
-            <img id="loading_img" src="{{ url_for('.static', filename='Pacman.gif') }}"
-                 alt="loading..." style="display: none; margin: auto;"/>
+            <div class="mb-3" id="loading-img" style="display: none; padding: 5px; text-align: center">
+                <p>Upload in progress...</p>
+            </div>
+            <script>
+                loadLoadingAnimation('loading-img');
+            </script>
         </div>
     </div>