Added an AJAX spinner

netbox/templates/_base.html

@@ -323,13 +323,19 @@
             </div>
         </div>
     </footer>
-<script type="text/javascript">
-    var netbox_api_path = "/{{ settings.BASE_PATH }}api/";
-</script>
 <script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
 <script src="{% static 'jquery-ui-1.12.1/jquery-ui.min.js' %}"></script>
 <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/forms.js' %}?v{{ settings.VERSION }}"></script>
+<script type="text/javascript">
+    var netbox_api_path = "/{{ settings.BASE_PATH }}api/";
+    var loading = $(".loading");
+    $(document).ajaxStart(function() {
+        loading.show();
+    }).ajaxStop(function() {
+        loading.hide();
+    });
+</script>
 {% block javascript %}{% endblock %}
 </body>
 </html>

netbox/templates/dcim/device_status.html

@@ -1,8 +1,10 @@
 {% extends '_base.html' %}
+{% load staticfiles %}
 
 {% block title %}{{ device }} - NAPALM{% endblock %}
 
 {% block content %}
+    {% include 'inc/ajax_loader.html' %}
     {% include 'dcim/inc/device_header.html' with active_tab='status' %}
     <div class="row">
         <div class="col-md-6">
@@ -47,7 +49,7 @@
 <script type="text/javascript">
 $(document).ready(function() {
     $.ajax({
-        url: "{% url 'dcim-api:device-napalm' pk=device.pk %}?method=get_facts",
+        url: "{% url 'dcim-api:device-napalm' pk=device.pk %}?method=get_facts&method=get_environment",
         dataType: 'json',
         success: function(json) {
             $('#hostname').html(json['get_facts']['hostname']);

netbox/templates/inc/ajax_loader.html

@@ -0,0 +1,4 @@
+{% load staticfiles %}
+<div class="loading text-center">
+    <img src="{% static 'img/ajax-loader.gif' %}" />
+</div>