From c30722451e9b0a6d79ce97eb029d1cc0739e1bbd Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 26 Nov 2024 20:15:41 +0100
Subject: [PATCH] UX: hide drawer during loading page

---
 src/UI/Base/DrawerLeft.svelte          |  4 ++--
 src/UI/BigComponents/MenuDrawer.svelte | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/UI/Base/DrawerLeft.svelte b/src/UI/Base/DrawerLeft.svelte
index 33fe2c038..998a2ce4d 100644
--- a/src/UI/Base/DrawerLeft.svelte
+++ b/src/UI/Base/DrawerLeft.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { Drawer } from "flowbite-svelte"
-  import { sineIn } from "svelte/easing"
+  import { cubicInOut } from "svelte/easing"
   import { UIEventSource } from "../../Logic/UIEventSource.js"
 
   export let shown: UIEventSource<boolean>
   let transitionParams = {
     x: -320,
     duration: 200,
-    easing: sineIn,
+    easing: cubicInOut,
   }
   let hidden = !shown.data
   $: {
diff --git a/src/UI/BigComponents/MenuDrawer.svelte b/src/UI/BigComponents/MenuDrawer.svelte
index c5a282da9..1cedb769b 100644
--- a/src/UI/BigComponents/MenuDrawer.svelte
+++ b/src/UI/BigComponents/MenuDrawer.svelte
@@ -50,6 +50,7 @@
   import Squares2x2 from "@babeard/svelte-heroicons/mini/Squares2x2"
   import EnvelopeOpen from "@babeard/svelte-heroicons/mini/EnvelopeOpen"
   import PanoramaxLink from "./PanoramaxLink.svelte"
+  import { UIEventSource } from "../../Logic/UIEventSource"
 
   export let state: ThemeViewState
   let userdetails = state.osmConnection.userDetails
@@ -63,9 +64,21 @@
   let location = state.mapProperties.location
   export let onlyLink: boolean
   const t = Translations.t.general.menu
+  let shown = new UIEventSource(state.guistate.pageStates.menu.data)
+  state.guistate.pageStates.menu.addCallback(isShown => {
+    console.log("Setting", isShown)
+    if(isShown){
+      shown.setData(true)
+    }else{
+      Utils.waitFor(250).then(() => {
+        shown.setData(state.guistate.pageStates.menu.data)
+      })
+    }
+  })
+
 </script>
 
-<div class="low-interaction flex h-screen flex-col gap-y-2 overflow-y-auto p-2 sm:gap-y-3 sm:p-3">
+<div class="low-interaction flex h-screen flex-col gap-y-2 overflow-y-auto p-2 sm:gap-y-3 sm:p-3" class:hidden={!$shown}>
   <div class="flex justify-between">
     <h2>
       <Tr t={t.title} />