summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorKuuuube <61125188+Kuuuube@users.noreply.github.com>2024-06-20 00:18:51 -0400
committerGitHub <noreply@github.com>2024-06-20 04:18:51 +0000
commitbba9ceb870a742bac1aef2c6ddd2b858917a2ea1 (patch)
treed4b9d20d1cf762c8a0ede268bca21e7cd7788a25
parentd9521c58bf9b9fef0c8b1248bf6ce8c69351fc16 (diff)
Show loading message before action popup is loaded (#1090)
-rw-r--r--ext/action-popup.html8
-rw-r--r--ext/css/action-popup.css6
-rw-r--r--ext/js/pages/action-popup-main.js2
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;
});