Background data loading & search icon fixes

src/components/css/search.css

@@ -32,8 +32,8 @@ div#searchbar {
 }
 #quickresults .mdl-list__item-icon {
   position: absolute;
-  left: 0;
-  transform: scale(0.8);
+  left: -2px;
+  transform: scale(0.8) translateY(-4px);
   height: 20px;
   width: 20px;
   margin-left: 2px;

src/components/html/quicksearch.html

@@ -7,7 +7,10 @@
     <input class="mdl-textfield__input" type="text" name="srch" id="fixed-header-drawer-exp" @keyup="handleInput(event.target.value)" @focus="showResults" @blur="hideResults">
   </div>
   <div id="quickresults" v-show="resultsVisible">
-    <a :href='result.link' v-for="result in found"><img class="mdl-list__item-icon" :src="app.datasource.icons.getIcon(result.id, result.dir)">{{result.text}}<br></a>
+    <a :href='result.link' v-for="result in found">
+      <span class="mdl-list__item-icon appic" :style="app.datasource.icons.getIconStyle(result.id, result.dir)"></span>
+      {{result.text}}<br>
+    </a>
     <a v-if="total === 0 && lastQuery.length > 2">{{locale.search.notfound}}</a>
     <a v-if="total === 0 && lastQuery.length == 0" :href="app.prefix + 'search'">{{locale.search.full}}</a>
     <a id="totalr" v-if="total > found.length" :href="app.prefix + 'search/cat/run'">{{locale.search.found}} {{total}}</a>

src/datasource.js

@@ -50,9 +50,20 @@ class DataSourceManager {
     this.screenshots = new SelectedScreenshotLoader()
   }
 
+  autoloadMetadata() {
+    this.loadMetadata(app.selectedDir).then(() => {
+      app.loading = false
+      for (const d of app.datasource.ds.contentDirs) {
+        if (d !== app.selectedDir) {
+          this.loadMetadata(d)
+        }
+      }
+    })
+  }
+
   async loadMetadata(dir) {
     if (this.ds.contentDirs.indexOf(dir) === -1) return
-    app.loading = true
+    if (dir === app.selectedDir) app.loading = true
     app.metaLoadingStarted = true
     const meta = await this.ds.getMetadata(dir)
     const all = this.combineAllCategories(dir, meta)

src/entry.js

@@ -81,8 +81,7 @@ initialize().then(() => {
     D_MODES
   }).mount()
   if (!app.metaLoadingStarted) {
-    app.datasource.loadMetadata(app.selectedDir)
-      .then(() => { app.loading = false })
+    app.datasource.autoloadMetadata()
   }
   document.getElementsByClassName('container')[0].style.display = 'block'
   // hide splashscreen after loading

src/router.js

@@ -25,9 +25,7 @@ export default class Router {
           app.selectedDir = dir
           app.ui = ''
           if (app.datasource && !app.meta[app.selectedDir]) {
-            app.datasource.loadMetadata(app.selectedDir).then(() => {
-              app.loading = false
-            })
+            app.datasource.autoloadMetadata()
           }
         } else {
           app.ui = id