From db3b1f74d23a10781a1c55b10cf190ad5ce46810 Mon Sep 17 00:00:00 2001
From: Mark Pinkster <mark@markyourmedia.nl>
Date: Tue, 13 Jan 2026 10:33:05 +0100
Subject: [PATCH] version numbering and loading improved

---
 index.html                | 66 +++++++++++++++++++++++++++++++++------
 js/app.js                 |  9 ++++++
 js/components/products.js | 10 ++++++
 3 files changed, 76 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index a02189e..7056582 100644
--- a/index.html
+++ b/index.html
@@ -20,22 +20,48 @@
             border-radius: 10px;
         }
     </style>
-    <!-- Load JavaScript modules -->
-    <script src="js/services/api.js"></script>
-    <script src="js/services/bogo.js"></script>
-    <script src="js/components/cart.js"></script>
-    <script src="js/components/products.js"></script>
-    <script src="js/components/forms.js"></script>
-    <script src="js/app.js"></script>
+    <!-- Load JavaScript modules with cache busting -->
+    <script>
+        // Change this version number to bust cache for all JS files
+        const APP_VERSION = '1.1';
+        
+        const scripts = [
+            'js/services/api.js',
+            'js/services/bogo.js',
+            'js/components/cart.js',
+            'js/components/products.js',
+            'js/components/forms.js',
+            'js/app.js'
+        ];
+        
+        scripts.forEach(src => {
+            document.write(`<script src="${src}?v=${APP_VERSION}"><\/script>`);
+        });
+    </script>
 </head>
 
 <body class="bg-slate-100 min-h-screen font-sans" x-data="salesApp()">
     <template x-if="isLoading">
         <div class="fixed inset-0 bg-slate-900 flex items-center justify-center z-[60]">
-            <div class="text-white font-black animate-pulse">LAAD SESSIE...</div>
+            <div class="text-center">
+                <div class="relative mb-6 mx-auto w-20 h-20">
+                    <!-- Outer spinning ring -->
+                    <div class="w-20 h-20 border-4 border-blue-500/30 rounded-full"></div>
+                    <!-- Inner spinning ring -->
+                    <div class="absolute top-0 left-0 w-20 h-20 border-4 border-transparent border-t-blue-500 rounded-full animate-spin"></div>
+                    <!-- Session icon in center -->
+                    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                        </svg>
+                    </div>
+                </div>
+                <h3 class="text-white font-black text-lg uppercase tracking-wider mb-2">Sessie Laden</h3>
+                <p class="text-blue-400 text-sm font-medium animate-pulse">Even geduld...</p>
+            </div>
         </div>
     </template>
-    <template x-if="!isLoggedIn && !isLoading">
+    <template x-if="!isLoggedIn && !isLoading && !isLoadingProducts">
         <div class="fixed inset-0 bg-slate-900 flex items-center justify-center p-4 z-50">
             <div
                 class="bg-white p-10 rounded-[2.5rem] shadow-2xl w-full max-w-md text-center border-t-8 border-blue-600">
@@ -54,6 +80,28 @@
         </div>
     </template>
 
+    <!-- Loading Products Overlay -->
+    <template x-if="isLoadingProducts">
+        <div class="fixed inset-0 bg-slate-900 flex items-center justify-center z-[55]">
+            <div class="text-center">
+                <div class="relative mb-6 mx-auto w-20 h-20">
+                    <!-- Outer spinning ring -->
+                    <div class="w-20 h-20 border-4 border-blue-500/30 rounded-full"></div>
+                    <!-- Inner spinning ring -->
+                    <div class="absolute top-0 left-0 w-20 h-20 border-4 border-transparent border-t-blue-500 rounded-full animate-spin"></div>
+                    <!-- Product icon in center -->
+                    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                        </svg>
+                    </div>
+                </div>
+                <h3 class="text-white font-black text-lg uppercase tracking-wider mb-2">Producten Laden</h3>
+                <p class="text-blue-400 text-sm font-medium animate-pulse" x-text="loadingMessage || 'Even geduld...'"></p>
+            </div>
+        </div>
+    </template>
+
     <div x-show="isLoggedIn && !isLoading" x-cloak class="max-w-[1440px] mx-auto p-6">
         <header
             class="flex justify-between items-center mb-8 bg-white p-6 rounded-3xl shadow-sm border-b-4 border-blue-600">
diff --git a/js/app.js b/js/app.js
index a75a181..ae78b0c 100644
--- a/js/app.js
+++ b/js/app.js
@@ -9,6 +9,8 @@ function salesApp() {
         // Authentication state
         isLoggedIn: false,
         isLoading: true,
+        isLoadingProducts: false,
+        loadingMessage: '',
         currentUser: '',
         userRole: '',
         loginForm: { username: '', password: '' },
@@ -75,7 +77,14 @@ function salesApp() {
                 this.userRole = result.data.role || 'agent';
                 localStorage.setItem('telvero_user', result.data.user);
                 localStorage.setItem('telvero_role', result.data.role || 'agent');
+                
+                // Show loading indicator while fetching products
+                this.isLoadingProducts = true;
+                this.loadingMessage = 'Productgegevens ophalen...';
                 await this.loadProducts();
+                this.isLoadingProducts = false;
+                this.loadingMessage = '';
+                
                 this.isLoggedIn = true;
             } else {
                 alert("Login mislukt");
diff --git a/js/components/products.js b/js/components/products.js
index ba30b64..b8161e7 100644
--- a/js/components/products.js
+++ b/js/components/products.js
@@ -31,11 +31,21 @@ const ProductsComponent = {
              */
             async loadProducts() {
                 try {
+                    if (this.isLoadingProducts) {
+                        this.loadingMessage = 'Productgegevens ophalen van server...';
+                    }
                     const data = await ApiService.getProducts();
+                    
+                    if (this.isLoadingProducts) {
+                        this.loadingMessage = 'Producten verwerken...';
+                    }
                     // Sort products alphabetically by name
                     this.products = data.sort((a, b) => a.name.localeCompare(b.name, 'nl'));
                 } catch (e) {
                     console.error("Failed to load products");
+                    if (this.isLoadingProducts) {
+                        this.loadingMessage = 'Fout bij laden producten';
+                    }
                 }
             },
 
