From 95131c40ab1dfe7a566cd5b7f17c88076f3dd7cb Mon Sep 17 00:00:00 2001
From: Filipe Medeiros <filipesilvamedeiros@gmail.com>
Date: Mon, 11 Oct 2021 10:15:11 +0100
Subject: [PATCH] fix: some perf and other improvements

---
 src/components/Menu.vue         | 20 +++++++++++++++++---
 src/components/MenuDesktop.vue  |  4 ++--
 src/components/TrendingPage.vue |  2 +-
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index c77de88b..37672a5d 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -1,6 +1,6 @@
 <template>
-    <MenuDesktop :collapsed="collapsed" :toggleCollapsed="toggleCollapsed" v-if="!isMobile" />
-    <MenuMobile :collapsed="collapsed" :toggleCollapsed="toggleCollapsed" v-else />
+    <MenuDesktop :collapsed="collapsed" :toggleCollapsed="toggleCollapsedDebounced" v-if="!isMobile" />
+    <MenuMobile :collapsed="collapsed" :toggleCollapsed="toggleCollapsedDebounced" v-else />
 </template>
 
 <script>
@@ -16,11 +16,25 @@ export default {
     },
     props: {
         collapsed: Boolean,
-        toggleCollapse: Function,
+        toggleCollapsed: Function,
+    },
+    data() {
+        return { toggleCollapsedDisabled: false };
     },
     setup() {
         const isMobile = useIsMobile();
         return { isMobile };
     },
+    methods: {
+        toggleCollapsedDebounced() {
+            if (!this.toggleCollapsedDisabled) {
+                this.toggleCollapsed();
+                this.toggleCollapsedDisabled = true;
+                setTimeout(() => {
+                    this.toggleCollapsedDisabled = false;
+                }, 500);
+            }
+        },
+    },
 };
 </script>
diff --git a/src/components/MenuDesktop.vue b/src/components/MenuDesktop.vue
index 293e1d98..67d1d9cc 100644
--- a/src/components/MenuDesktop.vue
+++ b/src/components/MenuDesktop.vue
@@ -17,7 +17,7 @@
             <div
                 class="uk-flex uk-flex-middle"
                 style="gap: 16px; transition: transform 300ms, gap 300ms;"
-                :style="collapseText ? 'transform: scale(0); gap: 0;' : 'transition-delay: 170ms'"
+                :style="collapseText ? 'transform: scale3d(0, 0, 0); gap: 0;' : 'transition-delay: 170ms'"
                 v-if="!hideText"
             >
                 <img src="/img/pipedPlay.svg" :class="{ 'piped-play': !hideText }" />
@@ -181,7 +181,7 @@ export default {
 }
 
 .sidebar-link span {
-    transition: font-size 400ms, padding 400ms;
+    transition: font-size 400ms;
 }
 .collapse-text .sidebar-link span {
     font-size: 0;
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 201717a8..16432095 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -33,7 +33,7 @@
             v-if="!isMobile"
             class="uk-flex uk-flex-middle"
             style="gap: 16px; transition: transform 400ms; transform-origin: left;"
-            :style="!menuCollapsed ? 'transform: scale(0);' : {}"
+            :style="!menuCollapsed ? 'transform: scale3d(0, 0, 0);' : {}"
         >
             <img src="/img/pipedPlay.svg" style="height: 36px;" />
             <img src="/img/piped.svg" />