From 54594350bd44c6aa801773f5474524d07c8b5fce Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 24 Jan 2024 13:09:54 +1100
Subject: [PATCH] fix: no more menu skeleton fouc

---
 src/core/menu/islands/Footer.mjs | 24 ++++++++++++------------
 src/core/menu/menu.css           |  6 +++---
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/core/menu/islands/Footer.mjs b/src/core/menu/islands/Footer.mjs
index 154eb7a..49cbe1a 100644
--- a/src/core/menu/islands/Footer.mjs
+++ b/src/core/menu/islands/Footer.mjs
@@ -16,8 +16,7 @@ function Footer({ categories, transitionDuration = 150 }) {
       icon="refresh-cw"
       onclick=${reloadApp}
       style="display: none"
-    >
-      Reload & Apply Changes
+      >Reload & Apply Changes
     <//>`,
     $categories = categories.map(({ id, title, mods }) => {
       return [
@@ -25,8 +24,7 @@ function Footer({ categories, transitionDuration = 150 }) {
         html`<${Button}
           icon="chevron-left"
           onclick=${() => setState({ transition: "slide-to-left", view: id })}
-        >
-          ${title}
+          >${title}
         <//>`,
       ];
     });
@@ -35,19 +33,21 @@ function Footer({ categories, transitionDuration = 150 }) {
     let [footerOpen] = useState(["databaseUpdated"]);
     footerOpen ||= $categories.some(([ids]) => ids.some((id) => id === view));
     setState({ footerOpen });
-    if (!footerOpen) return;
-
-    // only toggle buttons if footer is open,
-    // otherwise leave as is during transition
-    for (const [ids, $btn] of $categories) {
-      const viewInCategory = ids.some((id) => id === view);
-      $btn.style.display = viewInCategory ? "" : "none";
-    }
   });
   useState(["databaseUpdated"], ([databaseUpdated]) => {
     $reload.style.display = databaseUpdated ? "" : "none";
     if (databaseUpdated) setState({ footerOpen: true });
   });
+  useState(["footerOpen"], ([footerOpen]) => {
+    // only toggle buttons if footer is open,
+    // otherwise leave as is during transition
+    if (!footerOpen) return;
+    const [view] = useState(["view"]);
+    for (const [ids, $btn] of $categories) {
+      const viewInCategory = ids.some((id) => id === view);
+      $btn.style.display = viewInCategory ? "" : "none";
+    }
+  });
 
   return html`<footer
     class="notion-enhancer--menu-footer px-[60px] py-[16px]
diff --git a/src/core/menu/menu.css b/src/core/menu/menu.css
index fb1399c..be018b1 100644
--- a/src/core/menu/menu.css
+++ b/src/core/menu/menu.css
@@ -51,7 +51,7 @@ body {
 }
 
 body > #skeleton {
-  background: var(--theme--bg-secondary);
+  background: rgba(86, 86, 86, 0.1);
 }
 body > #skeleton .row {
   display: flex;
@@ -64,7 +64,7 @@ body > #skeleton .shimmer {
   overflow: hidden;
   position: relative;
   border-radius: 4px;
-  background: var(--theme--bg-hover);
+  background: rgba(86, 86, 86, 0.1);
 }
 body > #skeleton .shimmer.icon {
   margin-left: 1px;
@@ -82,7 +82,7 @@ body > #skeleton .shimmer::before {
   background: linear-gradient(
     90deg,
     transparent 0,
-    var(--theme--bg-hover) 50%,
+    rgba(86, 86, 86, 0.1) 50%,
     transparent 100%
   );
 }