feat: load gist info on-demand

Author: ECRomaneli

src/locale/de.ts

@@ -323,6 +323,7 @@ export const de: Strings = {
       gistId: 'Gist-ID',
       gistIdHint: '(optional, automatisch aus Ihren Gists erkannt)',
       gistIdPlaceholder: 'Leer lassen, um ein neues Gist zu erstellen',
+      loadSettings: 'Einstellungen laden',
       hide: 'Ausblenden',
       show: 'Anzeigen',
     },

src/locale/en.ts

@@ -322,6 +322,7 @@ export const en = {
       gistId: 'Gist ID',
       gistIdHint: '(optional, auto-detected from your gists)',
       gistIdPlaceholder: 'Leave empty to create a new gist',
+      loadSettings: 'Load Settings',
       hide: 'Hide',
       show: 'Show',
     },

src/locale/es.ts

@@ -323,6 +323,7 @@ export const es: Strings = {
       gistId: 'ID del Gist',
       gistIdHint: '(opcional, auto-detectado de tus gists)',
       gistIdPlaceholder: 'Dejar vacío para crear un nuevo gist',
+      loadSettings: 'Cargar configuración',
       hide: 'Ocultar',
       show: 'Mostrar',
     },

src/locale/fr.ts

@@ -323,6 +323,7 @@ export const fr: Strings = {
       gistId: 'ID du Gist',
       gistIdHint: '(optionnel, détecté automatiquement depuis vos gists)',
       gistIdPlaceholder: 'Laisser vide pour créer un nouveau gist',
+      loadSettings: 'Charger les paramètres',
       hide: 'Masquer',
       show: 'Afficher',
     },

src/locale/it.ts

@@ -323,6 +323,7 @@ export const it: Strings = {
       gistId: 'ID del Gist',
       gistIdHint: '(opzionale, rilevato automaticamente dai tuoi gist)',
       gistIdPlaceholder: 'Lascia vuoto per creare un nuovo gist',
+      loadSettings: 'Carica impostazioni',
       hide: 'Nascondi',
       show: 'Mostra',
     },

src/locale/pt-BR.ts

@@ -323,6 +323,7 @@ export const ptBR: Strings = {
       gistId: 'ID do Gist',
       gistIdHint: '(opcional, auto-detectado de seus gists)',
       gistIdPlaceholder: 'Deixe em branco para criar um novo gist',
+      loadSettings: 'Carregar configurações',
       hide: 'Ocultar',
       show: 'Mostrar',
     },

src/locale/pt-PT.ts

@@ -323,6 +323,7 @@ export const ptPT: Strings = {
       gistId: 'ID do Gist',
       gistIdHint: '(opcional, detetado automaticamente dos seus gists)',
       gistIdPlaceholder: 'Deixe em branco para criar um novo gist',
+      loadSettings: 'Carregar definições',
       hide: 'Ocultar',
       show: 'Mostrar',
     },

src/locale/ru.ts

@@ -323,6 +323,7 @@ export const ru: Strings = {
       gistId: 'ID Gist',
       gistIdHint: '(необязательно, определяется автоматически из ваших gist)',
       gistIdPlaceholder: 'Оставьте пустым для создания нового gist',
+      loadSettings: 'Загрузить настройки',
       hide: 'Скрыть',
       show: 'Показать',
     },

web/preferences/components/sync/Sync.js

@@ -28,7 +28,7 @@ app.component('SyncTab', {
           </div>
           <span class="sync-card-description">{{ $i18n.preferences.sync.githubGistDesc }}</span>
         </div>
-        <div class="sync-card-body">
+        <div class="sync-card-body" v-if="settingsLoaded">
           <div class="sync-field">
             <label>{{ $i18n.preferences.sync.personalAccessToken }}</label>
             <div class="input-group input-group-sm">
@@ -45,11 +45,15 @@ app.component('SyncTab', {
           </div>
         </div>
         <div class="sync-card-actions">
-          <button class="btn btn-sm btn-secondary" :disabled="!gist.token || loading" @click="gistPull">
+          <button v-if="!settingsLoaded" class="btn btn-sm btn-secondary" :disabled="loading" @click="loadSettings">
+            <span v-if="loading === 'load-settings'" class="spinner-border spinner-border-sm me-1"></span>
+            {{ $i18n.preferences.sync.loadSettings }}
+          </button>
+          <button v-if="settingsLoaded" class="btn btn-sm btn-secondary" :disabled="!gist.token || loading" @click="gistPull">
             <span v-if="loading === 'gist-pull'" class="spinner-border spinner-border-sm me-1"></span>
             {{ $i18n.preferences.sync.import }}
           </button>
-          <button class="btn btn-sm btn-secondary" :disabled="!gist.token || loading" @click="gistPush">
+          <button v-if="settingsLoaded" class="btn btn-sm btn-secondary" :disabled="!gist.token || loading" @click="gistPush">
             <span v-if="loading === 'gist-push'" class="spinner-border spinner-border-sm me-1"></span>
              {{ $i18n.preferences.sync.export }}
           </button>
@@ -65,19 +69,22 @@ app.component('SyncTab', {
     return {
       showToken: false,
       loading: null,
+      settingsLoaded: false,
       gist: { token: '', id: '' }
     }
   },
 
-  async created() {
-    await this.loadSettings()
-  },
-
   methods: {
     async loadSettings() {
-      const settings = await this.$remote.sync.getSettings()
-      this.gist.token = settings.gistToken || ''
-      this.gist.id = settings.gistId || ''
+      this.loading = 'load-settings'
+      try {
+        const settings = await this.$remote.sync.getSettings()
+        this.gist.token = settings.gistToken || ''
+        this.gist.id = settings.gistId || ''
+        this.settingsLoaded = true
+      } finally {
+        this.loading = null
+      }
     },
 
     saveGistSettings() {