diff --git a/site/_templates/_loader.html b/site/_templates/_loader.html
index bdba530..b276c99 100644
--- a/site/_templates/_loader.html
+++ b/site/_templates/_loader.html
@@ -1,42 +1,4 @@
-
\ No newline at end of file
+
+
diff --git a/site/cart.js b/site/cart.js
index 32e20ed..bb42bab 100644
--- a/site/cart.js
+++ b/site/cart.js
@@ -208,5 +208,4 @@ function loadCart() {
productsList.model = productsFilter.model = models.items;
if (c || d) itemsChart.render();
cartFilter.filter();
- document.querySelector('[x-id="loader"]').classList.add("hidden");
})();
diff --git a/site/carts.js b/site/carts.js
index cd5c14c..590cea5 100644
--- a/site/carts.js
+++ b/site/carts.js
@@ -71,5 +71,4 @@ function importCarts(importedCarts) {
};
reader.readAsText(event.target.files[0]);
});
- document.querySelector('[x-id="loader"]').classList.add("hidden");
})();
diff --git a/site/changes.js b/site/changes.js
index 683548f..cbb9cfe 100644
--- a/site/changes.js
+++ b/site/changes.js
@@ -38,5 +38,4 @@ require("./views");
}
itemsFilter.model = itemsList.model = model.items;
itemsFilter.fireChangeEvent();
- document.querySelector('[x-id="loader"]').classList.add("hidden");
})();
diff --git a/site/index.js b/site/index.js
index 3b9acf0..3023534 100644
--- a/site/index.js
+++ b/site/index.js
@@ -41,5 +41,4 @@ require("./views");
}
itemsFilter.model = itemsList.model = model.items;
itemsFilter.fireChangeEvent();
- document.querySelector('[x-id="loader"]').classList.add("hidden");
})();
diff --git a/site/js/progress-bar.js b/site/js/progress-bar.js
new file mode 100644
index 0000000..2ad021c
--- /dev/null
+++ b/site/js/progress-bar.js
@@ -0,0 +1,31 @@
+class ProgressBar {
+ constructor(steps) {
+ this.progress = 0;
+ this.steps = steps ?? 0;
+ this.step = 100 / this.steps;
+ this.container = document.querySelector('[x-id="loader"]');
+ this.progressBar = this.container.querySelector(".progress-bar");
+ }
+
+ setSteps(steps) {
+ this.steps = steps;
+ this.step = 100 / steps;
+ }
+
+ addStep() {
+ this.progress += this.step;
+ this.progressBar.style.transform = `scaleX(${this.progress / 100})`;
+ if (this.progress >= 100) {
+ this.finished();
+ }
+ }
+
+ finished() {
+ const element = this.container;
+ setTimeout(function () {
+ element.classList.add("hidden");
+ }, 250);
+ }
+}
+
+exports.ProgressBar = ProgressBar;
diff --git a/site/model/items.js b/site/model/items.js
index f4f6654..144a9ce 100644
--- a/site/model/items.js
+++ b/site/model/items.js
@@ -2,6 +2,9 @@ const { Model } = require("./model");
const { STORE_KEYS } = require("./stores");
const { Settings } = require("./settings");
const { log, deltaTime } = require("../js/misc");
+const { ProgressBar } = require("../js/progress-bar");
+
+const Bar = new ProgressBar(STORE_KEYS.length);
class Items extends Model {
constructor() {
@@ -32,6 +35,7 @@ class Items extends Model {
const settings = new Settings();
let start = performance.now();
const compressedItemsPerStore = [];
+
for (const store of STORE_KEYS) {
compressedItemsPerStore.push(
new Promise(async (resolve) => {
@@ -48,9 +52,11 @@ class Items extends Model {
log(`Loader - error while loading compressed items for ${store} ${e.message}`);
resolve([]);
}
+ Bar.addStep();
})
);
}
+
let items = [].concat(...(await Promise.all(compressedItemsPerStore)));
log(`Loader - loaded ${items.length} items took ${deltaTime(start).toFixed(4)} secs`);
diff --git a/site/style.css b/site/style.css
index 3050cc6..d6dd3de 100644
--- a/site/style.css
+++ b/site/style.css
@@ -246,3 +246,20 @@ thead > tr {
a {
@apply hover:underline;
}
+
+/* loading-bar */
+.progress-bar-container {
+ @apply bg-stone-200 rounded-xl;
+ width: 300px;
+ height: 10px;
+}
+
+.progress-bar {
+ @apply bg-primary rounded-xl;
+ height: 10px;
+ transform: scaleX(0%);
+ will-change: transform;
+ transition: scaleX 0.5s;
+ width: 100%;
+ transform-origin: left center;
+}