Lazy load static objects

3 files changed, 48 insertions, 36 deletions

diff --git a/client/src/app/shared/instance/instance-features-table.component.html b/client/src/app/shared/instance/instance-features-table.component.html
index f880a886f..fd8b3354f 100644
--- a/client/src/app/shared/instance/instance-features-table.component.html
+++ b/client/src/app/shared/instance/instance-features-table.component.html
@@ -1,6 +1,6 @@
 <div class="feature-table">
 
-  <table class="table" *ngIf="config">
+  <table class="table" *ngIf="serverConfig">
     <tr>
       <td i18n class="label">PeerTube version</td>
 
@@ -19,7 +19,7 @@
     <tr>
       <td i18n class="label">User registration allowed</td>
       <td>
-        <my-feature-boolean [value]="config.signup.allowed"></my-feature-boolean>
+        <my-feature-boolean [value]="serverConfig.signup.allowed"></my-feature-boolean>
       </td>
     </tr>
 
@@ -30,15 +30,15 @@
     <tr>
       <td i18n class="sub-label">Transcoding in multiple resolutions</td>
       <td>
-        <my-feature-boolean [value]="config.transcoding.enabledResolutions.length !== 0"></my-feature-boolean>
+        <my-feature-boolean [value]="serverConfig.transcoding.enabledResolutions.length !== 0"></my-feature-boolean>
       </td>
     </tr>
 
     <tr>
       <td i18n class="sub-label">Video uploads</td>
       <td>
-        <span *ngIf="config.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
-        <span *ngIf="!config.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
+        <span *ngIf="serverConfig.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
+        <span *ngIf="!serverConfig.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
       </td>
     </tr>
 
@@ -69,14 +69,14 @@
     <tr>
       <td i18n class="sub-label">HTTP import (YouTube, Vimeo, direct URL...)</td>
       <td>
-        <my-feature-boolean [value]="config.import.videos.http.enabled"></my-feature-boolean>
+        <my-feature-boolean [value]="serverConfig.import.videos.http.enabled"></my-feature-boolean>
       </td>
     </tr>
 
     <tr>
       <td i18n class="sub-label">Torrent import</td>
       <td>
-        <my-feature-boolean [value]="config.import.videos.torrent.enabled"></my-feature-boolean>
+        <my-feature-boolean [value]="serverConfig.import.videos.torrent.enabled"></my-feature-boolean>
       </td>
     </tr>
 
@@ -88,7 +88,7 @@
     <tr>
       <td i18n class="sub-label">P2P enabled</td>
       <td>
-        <my-feature-boolean [value]="config.tracker.enabled"></my-feature-boolean>
+        <my-feature-boolean [value]="serverConfig.tracker.enabled"></my-feature-boolean>
       </td>
     </tr>
   </table>
diff --git a/client/src/app/shared/instance/instance-features-table.component.ts b/client/src/app/shared/instance/instance-features-table.component.ts
index 1661f1efe..8fd15ebad 100644
--- a/client/src/app/shared/instance/instance-features-table.component.ts
+++ b/client/src/app/shared/instance/instance-features-table.component.ts
@@ -10,7 +10,7 @@ import { ServerConfig } from '@shared/models'
 })
 export class InstanceFeaturesTableComponent implements OnInit {
   quotaHelpIndication = ''
-  config: ServerConfig
+  serverConfig: ServerConfig
 
   constructor (
     private i18n: I18n,
@@ -19,29 +19,34 @@ export class InstanceFeaturesTableComponent implements OnInit {
   }
 
   get initialUserVideoQuota () {
-    return this.serverService.getConfig().user.videoQuota
+    return this.serverConfig.user.videoQuota
   }
 
   get dailyUserVideoQuota () {
-    return Math.min(this.initialUserVideoQuota, this.serverService.getConfig().user.videoQuotaDaily)
+    return Math.min(this.initialUserVideoQuota, this.serverConfig.user.videoQuotaDaily)
   }
 
   ngOnInit () {
-    this.serverService.configLoaded
-        .subscribe(() => {
-          this.config = this.serverService.getConfig()
+    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverService.getConfig()
+        .subscribe(config => {
+          this.serverConfig = config
           this.buildQuotaHelpIndication()
         })
   }
 
   buildNSFWLabel () {
-    const policy = this.serverService.getConfig().instance.defaultNSFWPolicy
+    const policy = this.serverConfig.instance.defaultNSFWPolicy
 
     if (policy === 'do_not_list') return this.i18n('Hidden')
     if (policy === 'blur') return this.i18n('Blurred with confirmation request')
     if (policy === 'display') return this.i18n('Displayed')
   }
 
+  getServerVersionAndCommit () {
+    return this.serverService.getServerVersionAndCommit()
+  }
+
   private getApproximateTime (seconds: number) {
     const hours = Math.floor(seconds / 3600)
     let pluralSuffix = ''
@@ -53,10 +58,6 @@ export class InstanceFeaturesTableComponent implements OnInit {
     return this.i18n('~ {{minutes}} {minutes, plural, =1 {minute} other {minutes}}', { minutes })
   }
 
-  getServerVersionAndCommit () {
-    return this.serverService.getServerVersionAndCommit()
-  }
-
   private buildQuotaHelpIndication () {
     if (this.initialUserVideoQuota === -1) return
 
diff --git a/client/src/app/shared/instance/instance.service.ts b/client/src/app/shared/instance/instance.service.ts
index 44b413fa4..8b26063fb 100644
--- a/client/src/app/shared/instance/instance.service.ts
+++ b/client/src/app/shared/instance/instance.service.ts
@@ -1,4 +1,4 @@
-import { catchError } from 'rxjs/operators'
+import { catchError, map } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { environment } from '../../../environments/environment'
@@ -7,6 +7,7 @@ import { About } from '../../../../../shared/models/server'
 import { MarkdownService } from '@app/shared/renderer'
 import { peertubeTranslate } from '@shared/models'
 import { ServerService } from '@app/core'
+import { forkJoin } from 'rxjs'
 
 @Injectable()
 export class InstanceService {
@@ -57,25 +58,35 @@ export class InstanceService {
     return html
   }
 
-  buildTranslatedLanguages (about: About, translations: any) {
-    const languagesArray = this.serverService.getVideoLanguages()
+  buildTranslatedLanguages (about: About) {
+    return forkJoin([
+      this.serverService.getVideoLanguages(),
+      this.serverService.getServerLocale()
+    ]).pipe(
+      map(([ languagesArray, translations ]) => {
+        return about.instance.languages
+                    .map(l => {
+                      const languageObj = languagesArray.find(la => la.id === l)
 
-    return about.instance.languages
-                .map(l => {
-                  const languageObj = languagesArray.find(la => la.id === l)
-
-                  return peertubeTranslate(languageObj.label, translations)
-                })
+                      return peertubeTranslate(languageObj.label, translations)
+                    })
+      })
+    )
   }
 
-  buildTranslatedCategories (about: About, translations: any) {
-    const categoriesArray = this.serverService.getVideoCategories()
-
-    return about.instance.categories
-                .map(c => {
-                  const categoryObj = categoriesArray.find(ca => ca.id === c)
+  buildTranslatedCategories (about: About) {
+    return forkJoin([
+      this.serverService.getVideoCategories(),
+      this.serverService.getServerLocale()
+    ]).pipe(
+      map(([ categoriesArray, translations ]) => {
+        return about.instance.categories
+                    .map(c => {
+                      const categoryObj = categoriesArray.find(ca => ca.id === c)
 
-                  return peertubeTranslate(categoryObj.label, translations)
-                })
+                      return peertubeTranslate(categoryObj.label, translations)
+                    })
+      })
+    )
   }
 }