3 files changed, 13 insertions, 3 deletions
diff --git a/ext/action-popup.html b/ext/action-popup.html
index e160b0fc..64e3c21f 100644
--- a/ext/action-popup.html
+++ b/ext/action-popup.html
@@ -14,8 +14,13 @@
     <link rel="stylesheet" type="text/css" href="/css/action-popup.css">
     <script src="/js/pages/action-popup-main.js" type="module"></script>
 </head>
-<body hidden>
+<body>
 
+<div id="loading">
+    Loading...
+</div>
+
+<div id="action-popups">
 <div id="mini">
     <label class="toggle">
         <input type="checkbox" class="enable-search">
@@ -86,6 +91,7 @@
         <span class="link-group-icon" data-icon="question-mark-circle"></span><span class="link-group-label">Information</span>
     </a>
 </div>
+</div>
 
 </body>
 </html>
diff --git a/ext/css/action-popup.css b/ext/css/action-popup.css
index 5b68396f..db2e7f1e 100644
--- a/ext/css/action-popup.css
+++ b/ext/css/action-popup.css
@@ -208,6 +208,12 @@ label {
 body[data-loaded=true] .toggle-group {
     transition: transform 0.35s;
 }
+body[data-loaded=true] #loading {
+    display: none;
+}
+body:not([data-loaded=true]) #action-popups {
+    display: none;
+}
 
 .toggle-on,
 .toggle-off,
diff --git a/ext/js/pages/action-popup-main.js b/ext/js/pages/action-popup-main.js
index d8eb87bc..4137d5c3 100644
--- a/ext/js/pages/action-popup-main.js
+++ b/ext/js/pages/action-popup-main.js
@@ -328,6 +328,4 @@ await Application.main(true, async (application) => {
 
     const displayController = new DisplayController(application.api);
     await displayController.prepare();
-
-    document.body.hidden = false;
 });