fix settings loading causing freezing

Author: mrfrase3

src/App.vue

@@ -204,8 +204,6 @@ export default {
     await this.$FeathersVuex.api.Setting.find({ query: { $limit: 9999999 } });
     const { Setting } = this.$FeathersVuex.api;
     const { data } = Setting.findInStore({ query: { key: 'editor' } });
-    // eslint-disable-next-line no-console
-    console.log(data[0]);
     this.$vuetify.theme.dark = /(dark)|(black)/.test(data[0]?.value?.theme ?? '');
   },
 };

src/components/files/editor.vue

@@ -21,9 +21,7 @@ export default {
       const { Setting } = this.$FeathersVuex.api;
       const { data } = Setting.findInStore({ query: { key: 'editor' } });
       if (data[0]) return data[0].value;
-      const settings = new Setting({ key: 'editor' });
-      settings.save();
-      return settings.value;
+      return {};
     },
     currentFile() {
       const { File } = this.$FeathersVuex.api;

src/components/ide.vue

@@ -35,9 +35,7 @@ export default {
       const { Setting } = this.$FeathersVuex.api;
       const { data } = Setting.findInStore({ query: { key: 'editor' } });
       if (data[0]) return data[0].value;
-      const settings = new Setting({ key: 'editor' });
-      settings.save();
-      return settings.value;
+      return {};
     },
     editorOptions() {
       return {

src/components/settings/compiler.vue

@@ -5,7 +5,7 @@
     </v-card-title>
     <v-card-text>
       <v-row>
-        <v-col cols="12" sm="6" md="4" class="py-0">
+        <v-col cols="12" sm="6" md="4" class="pt-0">
           <v-checkbox
             :input-value="!!settings.value.verbose"
             label="Verbose Output"
@@ -14,15 +14,6 @@
             @change="$set(settings.value, 'verbose', $event)"
           />
         </v-col>
-        <v-col cols="12" sm="6" md="4" class="py-0">
-          <v-checkbox
-            :input-value="!!settings.value.preferLocal"
-            label="Prefer Local Upload"
-            hint="If possible, will use a locally ported upload protocol over using the remote server"
-            persistent-hint
-            @change="$set(settings.value, 'preferLocal', $event)"
-          />
-        </v-col>
       </v-row>
     </v-card-text>
   </v-card>
@@ -31,30 +22,36 @@
 <script>
 
 export default {
-  computed: {
-    settings() {
+  data() {
+    return {
+      settings: { value: {} },
+    };
+  },
+  methods: {
+    loadSettings() {
       const { Setting } = this.$FeathersVuex.api;
       const { data } = Setting.findInStore({ query: { key: 'compiler' } });
-      if (data[0]) return data[0];
+      if (data[0]) {
+        [this.settings] = data;
+        return;
+      }
       const settings = new Setting({ key: 'compiler' });
       settings.save();
-      return settings;
+      this.settings = settings;
     },
-  },
-  methods: {
     handleSave(to, from) {
       if (JSON.stringify(to) === JSON.stringify(from)) return false;
       this.settings.save();
       return true;
     },
   },
+  mounted() {
+    this.loadSettings();
+  },
   watch: {
     'settings.value.verbose': {
       handler(to, from) { this.handleSave(to, from); },
     },
-    'settings.value.preferLocal': {
-      handler(to, from) { this.handleSave(to, from); },
-    },
   },
 };
 </script>

src/components/settings/editor.vue

@@ -87,25 +87,30 @@ export default {
         { text: 'High Contrast', value: 'hc-black' },
       ],
       demoCode,
+      settings: { value: {} },
     };
   },
-  computed: {
-    settings() {
+  methods: {
+    loadSettings() {
       const { Setting } = this.$FeathersVuex.api;
       const { data } = Setting.findInStore({ query: { key: 'editor' } });
-      if (data[0]) return data[0];
+      if (data[0]) {
+        [this.settings] = data;
+        return;
+      }
       const settings = new Setting({ key: 'editor' });
       settings.save();
-      return settings;
+      this.settings = settings;
     },
-  },
-  methods: {
     handleSave(to, from) {
       if (JSON.stringify(to) === JSON.stringify(from)) return false;
       this.settings.save();
       return true;
     },
   },
+  mounted() {
+    this.loadSettings();
+  },
   watch: {
     'settings.value.theme': {
       handler(to, from) {

src/plugins/compile-server.js

@@ -86,8 +86,6 @@ class CompileServer extends EventEmitter {
   }
 
   async load() {
-    // eslint-disable-next-line no-console
-    console.log(this.isValid());
     if (!this.isValid()) return;
     // eslint-disable-next-line no-console
     console.log('loading start');
@@ -151,8 +149,6 @@ class CompileServer extends EventEmitter {
   }
 
   async librariesSearch(search, limit = 10, skip = 0, sortBy = 'name', sortDesc = false) {
-    // eslint-disable-next-line no-console
-    console.log('lib-search');
     await this.initPromise;
     const e = encodeURIComponent;
     const query = `?search=${e(search ?? '')}&limit=${limit}&skip=${skip}&sortBy=${e(sortBy)}&sortDesc=${sortDesc}`;
@@ -259,7 +255,7 @@ class CompileServer extends EventEmitter {
       const hex = await this.compile(1, false);
       this.emit('console.progress', { percent: 0.5, message: 'Uploading code...' });
       // eslint-disable-next-line no-console
-      console.log(this.Vue.$serial);
+      // console.log(this.Vue.$serial);
       await this.Vue.$uploader.upload(hex, { ...flags });
       this.emit('console.progress', { percent: 1.0, message: 'Done!' });
     } catch (err) {