Render tabs when loading is false

src/views/settings/components/ActivityPub.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!loading">
     <el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth">
       <setting :settings-group="activitypub" :data="activitypubData"/>
     </el-form>
@@ -35,6 +35,9 @@ export default {
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
     },
+    loading() {
+      return this.$store.state.settings.loading
+    },
     user() {
       return this.$store.state.settings.description.find(setting => setting.key === ':user')
     }

src/views/settings/components/Authentication.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!loading">
     <el-form ref="pleromaAuthenticatorData" :model="pleromaAuthenticatorData" :label-width="labelWidth">
       <setting :settings-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
     </el-form>
@@ -48,6 +48,9 @@ export default {
     ldap() {
       return this.$store.state.settings.description.find(setting => setting.key === ':ldap')
     },
+    loading() {
+      return this.$store.state.settings.loading
+    },
     oauth2() {
       return this.$store.state.settings.description.find(setting => setting.key === ':oauth2')
     },

src/views/settings/components/Captcha.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!loading">
     <el-form ref="captchaData" :model="captchaData" :label-width="labelWidth">
       <setting :settings-group="captcha" :data="captchaData"/>
     </el-form>
@@ -37,6 +37,9 @@ export default {
     },
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
+    },
+    loading() {
+      return this.$store.state.settings.loading
     }
   },
   methods: {

src/views/settings/components/Endpoint.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="endpointData" :model="endpointData" :label-width="labelWidth">
+  <el-form v-if="!loading" ref="endpointData" :model="endpointData" :label-width="labelWidth">
     <setting :settings-group="endpoint" :data="endpointData"/>
     <div class="line"/>
     <el-form-item class="options-paragraph-container">
@@ -38,6 +38,9 @@ export default {
     },
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
+    },
+    loading() {
+      return this.$store.state.settings.loading
     }
   },
   methods: {

src/views/settings/components/Esshd.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!loading">
     <el-form ref="esshdData" :model="esshdData" :label-width="labelWidth">
       <el-form-item>
         <p class="expl">Before enabling this you must:
@@ -49,6 +49,9 @@ export default {
     },
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
+    },
+    loading() {
+      return this.$store.state.settings.loading
     }
   },
   methods: {

src/views/settings/components/Gopher.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="gopher" :model="gopher" :label-width="labelWidth">
+  <el-form v-if="!loading" ref="gopher" :model="gopher" :label-width="labelWidth">
     <el-form-item label="Enabled">
       <el-switch :value="gopher.enabled" @change="updateSetting($event, 'gopher', 'enabled')"/>
       <p class="expl">Enables the gopher interface</p>
@@ -37,6 +37,9 @@ export default {
     },
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
+    },
+    loading() {
+      return this.$store.state.settings.loading
     }
   },
   methods: {

src/views/settings/components/Instance.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!loading">
     <el-form ref="instanceData" :model="instanceData" :label-width="labelWidth">
       <setting :settings-group="instance" :data="instanceData"/>
     </el-form>
@@ -70,6 +70,9 @@ export default {
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
     },
+    loading() {
+      return this.$store.state.settings.loading
+    },
     pleromaUser() {
       return this.$store.state.settings.description.find(setting => setting.key === 'Pleroma.User')
     },

src/views/settings/components/MRF.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!loading">
     <el-form ref="mrfSimple" :model="mrfSimple" :label-width="labelWidth">
       <el-form-item label="MRF Simple:"/>
       <el-form-item label="Media removal">
@@ -185,6 +185,9 @@ export default {
     },
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
+    },
+    loading() {
+      return this.$store.state.settings.loading
     }
   },
   methods: {

src/views/settings/components/Mailer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!loading">
     <el-form ref="mailer" :model="mailer" :label-width="labelWidth">
       <el-form-item label="Enabled">
         <el-switch :value="mailer.enabled" @change="updateSetting($event, 'Pleroma.Emails.Mailer', 'enabled')"/>
@@ -236,6 +236,9 @@ export default {
     },
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
+    },
+    loading() {
+      return this.$store.state.settings.loading
     }
   },
   methods: {

src/views/settings/components/MediaProxy.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="mediaProxy" :model="mediaProxy" :label-width="labelWidth">
+  <el-form v-if="!loading" ref="mediaProxy" :model="mediaProxy" :label-width="labelWidth">
     <el-form-item label="Enabled">
       <el-switch :value="mediaProxy.enabled" @change="updateSetting($event, 'media_proxy', 'enabled')"/>
       <p class="expl">Enables proxying of remote media to the instance’s proxy</p>
@@ -108,6 +108,9 @@ export default {
     },
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
+    },
+    loading() {
+      return this.$store.state.settings.loading
     }
   },
   methods: {

src/views/settings/components/Metadata.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!loading">
     <el-form ref="metadata" :model="metadata" :label-width="labelWidth">
       <el-form-item label="Providers">
         <el-select :value="metadata.providers || []" multiple filterable allow-create @change="updateSetting($event, 'Pleroma.Web.Metadata', 'providers')">
@@ -66,6 +66,9 @@ export default {
     },
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
+    },
+    loading() {
+      return this.$store.state.settings.loading
     }
   },
   methods: {

src/views/settings/components/Other.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!loading">
     <el-form ref="formatEncoders" :model="formatEncoders" :label-width="labelWidth">
       <el-form-item label="Phoenix Format encoders:"/>
       <el-form-item label="JSON">
@@ -47,6 +47,9 @@ export default {
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
     },
+    loading() {
+      return this.$store.state.settings.loading
+    },
     mimeTypes() {
       return Object.keys(this.mimeTypesConfig.value).map(key => [key, this.mimeTypesConfig.value[key]])
     }

src/views/settings/components/RateLimiters.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="rateLimiters" :model="rateLimiters" :label-width="labelWidth">
+  <el-form v-if="!loading" ref="rateLimiters" :model="rateLimiters" :label-width="labelWidth">
     <el-form-item label="Search:">
       <div v-if="!searchLimitAuthUsers">
         <el-input :value="searchLimitAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, 'search', 'scale', 'oneLimit', searchLimitAllUsers)"/> :
@@ -354,6 +354,9 @@ export default {
     },
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
+    },
+    loading() {
+      return this.$store.state.settings.loading
     }
   },
   methods: {

src/views/settings/components/WebPush.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="vapidDetails" :model="vapidDetails" :label-width="labelWidth">
+  <el-form v-if="!loading" ref="vapidDetails" :model="vapidDetails" :label-width="labelWidth">
     <el-form-item label="Subject">
       <el-input :value="vapidDetails.subject" @input="updateSetting($event, 'vapid_details', 'subject')"/>
       <p class="expl">A mailto link for the administrative contact. It’s best if this email is not a personal email address,
@@ -35,6 +35,9 @@ export default {
     },
     labelWidth() {
       return this.isMobile ? '100px' : '210px'
+    },
+    loading() {
+      return this.$store.state.settings.loading
     }
   },
   methods: {