pleroma-fe

commit: 375cbca9eb707aafec5d0a4f9e4c163ed0cd35f4
parent 7eff56ca2e9dccc26792f145b3d9dcd371e45176
Author: Henry Jameson <me@hjkos.com>
Date:   Sun, 22 Dec 2024 17:11:30 +0200

delay render of "heavy" tabs

Diffstat:
M
src/components/settings_modal/settings_modal_user_content.vue
3
+++
M
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
@@ -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
@@ -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
         : ''