feat: new custom loading animation

src/web_interface/static/js/loading.js

@@ -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/templates/database/database_search.html

@@ -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/show_analysis.html

@@ -37,6 +37,7 @@
         const selected_analysis = "{{ selected_analysis }}";
     </script>
     <script src="{{ url_for('static', filename='js/file_tree.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/loading.js') }}"></script>
 {% endblock %}
 
 
@@ -312,9 +313,11 @@ <h5 class="modal-title">Add analysis to file</h5>
 
                     <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>
 
@@ -355,8 +358,10 @@ <h5 class="modal-title">Add analysis to file</h5>
                             </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/upload/upload.html

@@ -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-gif');
+            </script>
         </div>
     </div>