Merge pull request #527 from filipesmedeiros/fix/perf-and-improvements

fix: some perf and other improvements

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>

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;

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" />