delay render of "heavy" tabs

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>

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
         : ''