From 375cbca9eb707aafec5d0a4f9e4c163ed0cd35f4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 22 Dec 2024 17:11:30 +0200
Subject: [PATCH] delay render of "heavy" tabs

---
 .../settings_modal/settings_modal_user_content.vue       | 3 +++
 src/components/tab_switcher/tab_switcher.jsx             | 9 ++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index 4d8981b2..fea9a20f 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -17,6 +17,7 @@
       :label="$t('settings.appearance')"
       icon="window-restore"
       data-tab-name="appearance"
+      :delay-render="true"
     >
       <AppearanceTab />
     </div>
@@ -25,6 +26,7 @@
       :label="$t('settings.style.themes3.editor.title')"
       icon="palette"
       data-tab-name="style"
+      :delay-render="true"
     >
       <StyleTab />
     </div>
@@ -33,6 +35,7 @@
       :label="$t('settings.theme_old')"
       icon="paint-brush"
       data-tab-name="theme"
+      :delay-render="true"
     >
       <ThemeTab />
     </div>
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index 027a380a..fad5020d 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -85,6 +85,7 @@ export default {
     setTab (index) {
       if (typeof this.onSwitch === 'function') {
         this.onSwitch.call(null, this.slots()[index].key)
+        console.log('DEBUG', this.slots()[index])
       }
       this.active = index
       if (this.scrollableTabs) {
@@ -145,7 +146,13 @@ export default {
       if (props.fullHeight) {
         classes.push('full-height')
       }
-      const renderSlot = (!this.renderOnlyFocused || active)
+      let delayRender = slot.props['delay-render']
+      if (delayRender && active) {
+        slot.props['delay-render'] = false
+        delayRender = false
+      }
+      console.log('DEBUG', !delayRender, !this.renderOnlyFocused, active)
+      const renderSlot = (!delayRender && (!this.renderOnlyFocused || active))
         ? slot
         : ''