No blocking while loading predifined #107

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sqliteviz",
-  "version": "0.18.1",
+  "version": "0.22.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "sqliteviz",
-      "version": "0.18.1",
+      "version": "0.22.0",
       "license": "Apache-2.0",
       "dependencies": {
         "codemirror": "^5.57.0",
@@ -5248,9 +5248,9 @@
       "dev": true
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001352",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001352.tgz",
-      "integrity": "sha512-GUgH8w6YergqPQDGWhJGt8GDRnY0L/iJVQcU3eJ46GYf52R8tk0Wxp0PymuFVZboJYXGiCqwozAYZNRjVj6IcA==",
+      "version": "1.0.30001488",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001488.tgz",
+      "integrity": "sha512-NORIQuuL4xGpIy6iCCQGN4iFjlBXtfKWIenlUuyZJumLRIindLb7wXM+GO8erEhb7vXfcnf4BAg2PrSDN5TNLQ==",
       "dev": true,
       "funding": [
         {
@@ -5260,6 +5260,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -27489,7 +27493,6 @@
       "integrity": "sha512-iFv9J3F5VKUPcbx+TqW5qhGmAVyXQxPRpKpPOuTLFIVTzg+iwJnrqVbL4kJU5ECGDxPESW2oCVgxv9bTlDPu7w==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.11.0",
         "@babel/helper-compilation-targets": "^7.9.6",
         "@babel/helper-module-imports": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -27502,7 +27505,6 @@
         "@vue/babel-plugin-jsx": "^1.0.3",
         "@vue/babel-preset-jsx": "^1.2.4",
         "babel-plugin-dynamic-import-node": "^2.3.3",
-        "core-js": "^3.6.5",
         "core-js-compat": "^3.6.5",
         "semver": "^6.1.0"
       }
@@ -29627,9 +29629,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001352",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001352.tgz",
-      "integrity": "sha512-GUgH8w6YergqPQDGWhJGt8GDRnY0L/iJVQcU3eJ46GYf52R8tk0Wxp0PymuFVZboJYXGiCqwozAYZNRjVj6IcA==",
+      "version": "1.0.30001488",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001488.tgz",
+      "integrity": "sha512-NORIQuuL4xGpIy6iCCQGN4iFjlBXtfKWIenlUuyZJumLRIindLb7wXM+GO8erEhb7vXfcnf4BAg2PrSDN5TNLQ==",
       "dev": true
     },
     "canvas-fit": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqliteviz",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {

src/store/mutations.js

@@ -53,5 +53,11 @@ export default {
   },
   updatePredefinedInquiries (state, inquiries) {
     state.predefinedInquiries = Array.isArray(inquiries) ? inquiries : [inquiries]
+  },
+  setLoadingPredefinedInquiries (state, value) {
+    state.loadingPredefinedInquiries = value
+  },
+  setPredefinedInquiriesLoaded (state, value) {
+    state.predefinedInquiriesLoaded = value
   }
 }

src/store/state.js

@@ -4,5 +4,7 @@ export default {
   currentTabId: null,
   untitledLastIndex: 0,
   predefinedInquiries: [],
+  loadingPredefinedInquiries: false,
+  predefinedInquiriesLoaded: false,
   db: null
 }

src/views/Main/Inquiries/index.vue

@@ -1,11 +1,18 @@
 <template>
-  <div>
+  <div id="my-inquiries-container">
     <div id="start-guide" v-if="allInquiries.length === 0">
       You don't have saved inquiries so far.
       <span class="link" @click="$root.$emit('createNewInquiry')">Create</span>
       the one from scratch or
       <span @click="importInquiries" class="link">import</span> from a file.
     </div>
+    <div
+      id="loading-predefined-status"
+      v-if="$store.state.loadingPredefinedInquiries"
+    >
+      <loading-indicator/>
+      Loading predefined inquiries...
+    </div>
     <div id="my-inquiries-content" ref="my-inquiries-content" v-show="allInquiries.length > 0">
       <div id="my-inquiries-toolbar">
         <div id="toolbar-buttons">
@@ -157,6 +164,7 @@ import DeleteIcon from './svg/delete'
 import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/TextField'
 import CheckBox from '@/components/CheckBox'
+import LoadingIndicator from '@/components/LoadingIndicator'
 import tooltipMixin from '@/tooltipMixin'
 import storedInquiries from '@/lib/storedInquiries'
 
@@ -169,7 +177,8 @@ export default {
     DeleteIcon,
     CloseIcon,
     TextField,
-    CheckBox
+    CheckBox,
+    LoadingIndicator
   },
   mixins: [tooltipMixin],
   data () {
@@ -248,15 +257,21 @@ export default {
       }
     }
   },
-  created () {
-    storedInquiries.readPredefinedInquiries()
-      .then(inquiries => {
+  async created () {
+    this.inquiries = storedInquiries.getStoredInquiries()
+    const loadingPredefinedInquiries = this.$store.state.loadingPredefinedInquiries
+    const predefinedInquiriesLoaded = this.$store.state.predefinedInquiriesLoaded
+    if (!predefinedInquiriesLoaded && !loadingPredefinedInquiries) {
+      try {
+        this.$store.commit('setLoadingPredefinedInquiries', true)
+        const inquiries = await storedInquiries.readPredefinedInquiries()
         this.$store.commit('updatePredefinedInquiries', inquiries)
-      })
-      .catch(console.error)
-      .finally(() => {
-        this.inquiries = storedInquiries.getStoredInquiries()
-      })
+        this.$store.commit('setPredefinedInquiriesLoaded', true)
+      } catch (e) {
+        console.error(e)
+      }
+      this.$store.commit('setLoadingPredefinedInquiries', false)
+    }
   },
   mounted () {
     this.resizeObserver = new ResizeObserver(this.calcMaxTableHeight)
@@ -441,6 +456,21 @@ export default {
 </script>
 
 <style scoped>
+#my-inquiries-container {
+  position: relative;
+}
+
+#loading-predefined-status {
+  position: absolute;
+  right: 0;
+  display: flex;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--color-text-light-2);
+  align-items: center;
+  padding: 8px;
+}
+
 #start-guide {
   position: absolute;
   top: 50%;

tests/store/mutations.spec.js

@@ -7,7 +7,9 @@ const {
   setCurrentTabId,
   setCurrentTab,
   updatePredefinedInquiries,
-  setDb
+  setDb,
+  setLoadingPredefinedInquiries,
+  setPredefinedInquiriesLoaded
 } = mutations
 
 describe('mutations', () => {
@@ -377,4 +379,22 @@ describe('mutations', () => {
     updatePredefinedInquiries(state, inquiries)
     expect(state.predefinedInquiries).to.eql(inquiries)
   })
+
+  it('setLoadingPredefinedInquiries', () => {
+    const state = {
+      loadingPredefinedInquiries: false
+    }
+
+    setLoadingPredefinedInquiries(state, true)
+    expect(state.loadingPredefinedInquiries).to.equal(true)
+  })
+
+  it('setPredefinedInquiriesLoaded', () => {
+    const state = {
+      predefinedInquiriesLoaded: false
+    }
+
+    setPredefinedInquiriesLoaded(state, true)
+    expect(state.predefinedInquiriesLoaded).to.equal(true)
+  })
 })