diff --git a/docs/API.md b/docs/API.md
index 3abf9396..13f40646 100755
--- a/docs/API.md
+++ b/docs/API.md
@@ -28,6 +28,7 @@ You can access the following files:
   | `language_strings.json` | The content of the language_strings table, which in turn is loaded from the plugins `config.json` definitions. |  
   | `table_custom_endpoint.json` | A custom endpoint generated by the SQL query specified by the `API_CUSTOM_SQL` setting. |
   | `table_settings.json` | The content of the settings table. |
+  | `app_state.json` | Contains the current application state. |
   
   Current/latest state of the aforementioned files depends on your settings.
 
diff --git a/front/css/pialert.css b/front/css/pialert.css
index d3e7747c..039c2ab6 100755
--- a/front/css/pialert.css
+++ b/front/css/pialert.css
@@ -459,35 +459,7 @@
     border-right: 5px solid #606060;
 }
 
-/* -----------------------------------------------------------------------------
-   Spin
------------------------------------------------------------------------------ */
-.pa_semitransparent-panel {
-    position: absolute;
-    width: 100%; /*calc (100% -40px);*/
-    height: 100%;
-    left: 0;
-    top: 0;
-    display: block;
 
-    opacity: 0.8;
-    background-color: #fff;
-    z-index: 99;
-}
-
-.pa_spinner {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 20px;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 15px;
-    width: 200px;
-
-    background-color: #fff;
-    z-index: 100;
-}
 
 /* -----------------------------------------------------------------------------
    Notification float banner
@@ -934,3 +906,37 @@ input[readonly] {
     display: none;
   }
 }
+
+/* -----------------------------------------------------------------------------
+   Spin
+----------------------------------------------------------------------------- */
+.pa_semitransparent-panel {
+    position: absolute;
+    width: 100%; /*calc (100% -40px);*/
+    height: 100%;
+    left: 0;
+    top: 0;
+    display: block;
+
+    opacity: 0.8;
+    background-color: #fff;
+    z-index: 99;
+}
+
+.pa_spinner {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 100px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 15px;
+    width: 200px;
+    background-color: #fff;
+    z-index: 100;
+}
+
+#loadingSpinner
+{
+    z-index: 100;
+}
diff --git a/front/deviceDetails.php b/front/deviceDetails.php
index 9600af7a..b3cf5aa2 100755
--- a/front/deviceDetails.php
+++ b/front/deviceDetails.php
@@ -540,15 +540,7 @@
               </div>
 
 <!-- tab page 3 ------------------------------------------------------------ -->
-              <div class="tab-pane fade table-responsive" id="panPresence">
-
-                  <!-- spinner -->
-                  <div id="loading" style="display: none">
-                    <div class="pa_semitransparent-panel"></div>
-                    <div class="panel panel-default pa_spinner">
-                      <table><td width="130px" align="middle"><?= lang("DevDetail_Loading");?></td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td></table>
-                    </div>
-                  </div>
+              <div class="tab-pane fade table-responsive" id="panPresence">                 
 
                   <!-- Calendar -->
                   <div id="calendar">
@@ -1136,9 +1128,9 @@ function initializeCalendar () {
       
     loading: function( isLoading, view ) {
         if (isLoading) {
-          $('#loading').show();
+          showSpinner()
         } else {
-          $('#loading').hide();
+          hideSpinner()
         }
     }
 
diff --git a/front/js/pialert_common.js b/front/js/pialert_common.js
index 4537371b..aa4d5c52 100755
--- a/front/js/pialert_common.js
+++ b/front/js/pialert_common.js
@@ -534,7 +534,41 @@ function isEmpty(value)
   return emptyArr.includes(value)
 }
 
+// -----------------------------------------------------------------------------
+//  Loading Spinner overlay
+// -----------------------------------------------------------------------------
+function showSpinner(stringKey='Loading')
+{
+  if($("#loadingSpinner"))
+  {
+    $("#loadingSpinner").show();
+  }
+  else{
+    html =  `
+    <!-- spinner -->
+    <div id="loadingSpinner" style="display: block">
+      <div class="pa_semitransparent-panel"></div>
+      <div class="panel panel-default pa_spinner">
+        <table>
+          <td width="130px" align="middle">${getString(stringKey)}</td>
+          <td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td>
+        </table>
+      </div>
+    </div>
+    `
+
+    $(".wrapper").append(html)
+  }
+}
+// -----------------------------------------------------------------------------
+function hideSpinner()
+{
+  $("#loadingSpinner").hide()
+}
+
+// -----------------------------------------------------------------------------
 // initialize
+// -----------------------------------------------------------------------------
 cacheSettings()
 cacheStrings()
 initDeviceListAll_JSON()
diff --git a/front/php/templates/header.php b/front/php/templates/header.php
index 3fe620d7..d3354373 100755
--- a/front/php/templates/header.php
+++ b/front/php/templates/header.php
@@ -83,9 +83,9 @@ if ($ENABLED_DARKMODE === True) {
 <script>
 
   function updateState(){
-    $.get('api/pialert_app_state.json?nocache=' + Date.now(), function(appState) {    
+    $.get('api/app_state.json?nocache=' + Date.now(), function(appState) {    
 
-      console.log(appState)
+      // console.log(appState)
 
       document.getElementById('state').innerHTML = appState["currentState"].replaceAll('"', '');
 
diff --git a/front/php/templates/language/de_de.json b/front/php/templates/language/de_de.json
index cca80f3a..5a2d5cad 100755
--- a/front/php/templates/language/de_de.json
+++ b/front/php/templates/language/de_de.json
@@ -61,6 +61,7 @@
         "Device_Table_nav_prev":"Zurück",
         "Presence_Title":"Anwesenheit pro Gerät",
         "Presence_Loading":"Laden...",
+        "Loading":"Laden...",
         "Presence_Shortcut_AllDevices":"Alle Geräte",
         "Presence_Shortcut_Connected":"Verbunden",
         "Presence_Shortcut_Favorites":"Favoriten",
diff --git a/front/php/templates/language/en_us.json b/front/php/templates/language/en_us.json
index 7197819e..99634409 100755
--- a/front/php/templates/language/en_us.json
+++ b/front/php/templates/language/en_us.json
@@ -84,6 +84,7 @@
         "Device_Table_nav_prev" : "Previous",
         "Presence_Title" : "Presence by Device",
 	"Presence_Loading" : "Loading...",	    
+	"Loading" : "Loading...",	    
         "Presence_Shortcut_AllDevices" : "All Devices",
         "Presence_Shortcut_Connected" : "Connected",
         "Presence_Shortcut_Favorites" : "Favorites",
diff --git a/front/php/templates/language/es_es.json b/front/php/templates/language/es_es.json
index 6dbdb503..c0a2a68c 100755
--- a/front/php/templates/language/es_es.json
+++ b/front/php/templates/language/es_es.json
@@ -83,6 +83,7 @@
         "Device_Table_nav_prev" : "Anterior",
         "Presence_Title" : "Historial por dispositivo",
         "Presence_Loading" : "Cargando...",        
+        "Loading" : "Cargando...",        
         "Presence_Shortcut_AllDevices" : "Todos",
         "Presence_Shortcut_Connected" : "Conectado(s)",
         "Presence_Shortcut_Favorites" : "Favorito(s)",
diff --git a/front/presence.php b/front/presence.php
index 4641df30..61e39751 100755
--- a/front/presence.php
+++ b/front/presence.php
@@ -148,18 +148,7 @@
             </div>
 
             <!-- box-body -->
-            <div class="box-body table-responsive">
-
-              <!-- spinner -->
-              <div id="loading" style="display: none">
-                <div class="pa_semitransparent-panel"></div>
-                <div class="panel panel-default pa_spinner">
-                  <table>
-                    <td width="130px" align="middle"><?= lang("Presence_Loading");?></td>
-                    <td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td>
-                  </table>
-                </div>
-              </div>
+            <div class="box-body table-responsive">              
 
               <!-- Calendar -->
               <div id="calendar"></div>
@@ -344,9 +333,9 @@ function initializeCalendar () {
 
     loading: function( isLoading, view ) {
         if (isLoading) {
-          $("#loading").show();
+          showSpinner();
         } else {
-          $("#loading").hide();
+          hideSpinner();
         }
     }
 
diff --git a/pialert/helper.py b/pialert/helper.py
index c02c1001..dba8b0d8 100755
--- a/pialert/helper.py
+++ b/pialert/helper.py
@@ -40,7 +40,7 @@ class app_state_class:
     def __init__(self, currentState):
         
         # json file containing the state to communicate with teh frontend
-        stateFile = apiPath + '/pialert_app_state.json'
+        stateFile = apiPath + '/app_state.json'
 
         #  update self
         self.currentState = currentState
@@ -69,7 +69,7 @@ class AppStateEncoder(json.JSONEncoder):
         return super().default(obj)
 
 #-------------------------------------------------------------------------------
-def updateState( newState):
+def updateState(newState):
 
     state = app_state_class(newState)