From 15055c95ddb022464b0a9a1949e45c7450a67f96 Mon Sep 17 00:00:00 2001
From: Andrew Northall <andrew@northall.me.uk>
Date: Sun, 29 Oct 2023 10:05:38 +0000
Subject: [PATCH] Hide notification pane before page has fully loaded (#202)

---
 app/static/css/core.css | 2 ++
 app/templates/base.html | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/static/css/core.css b/app/static/css/core.css
index 80487893..8e2c7542 100644
--- a/app/static/css/core.css
+++ b/app/static/css/core.css
@@ -234,6 +234,8 @@ body {
   cursor: pointer;
 }
 
+[x-cloak] { display: none !important; }
+
 .htmx-request {
   opacity: 0.5;
   transition: opacity 300ms linear;
diff --git a/app/templates/base.html b/app/templates/base.html
index c84a38b9..26497815 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -43,7 +43,7 @@
                     {% endif %}
                   </span>
                 </a>
-                <div class="notification-dropdown shadow-lg border border-2 bg-light" x-show="open" @click.outside="open = false" x-transition>
+                <div class="notification-dropdown shadow-lg border border-2 bg-light" x-show="open" @click.outside="open = false" x-cloak x-transition>
                   <div class="item title my-0">
                     Notifications
                   </div>