feat(parallel-fetch): voeg parallelle API-oproepen toe voor verbeterde prestaties

Introduceer een ThreadPoolExecutor om gelijktijdige API-oproepen mogelijk te maken. Deze wijziging verbetert de efficiëntie door weersinformatie, Sonos-zones en datumgegevens parallel op te halen. In de instellingenroute is logica toegevoegd om data parallel te laden, wat resulteert in snellere paginaprocessen. Daarnaast zijn er optimalisaties aan de UI gedaan om FOUC te voorkomen door het toepassen van een visibiliteitsstijl totdat de pagina volledig is geladen.

adhan-webapp/app.py

@@ -5,6 +5,7 @@ from config import *
 from hijridate import Gregorian
 from functools import lru_cache
 import time
+from concurrent.futures import ThreadPoolExecutor
 
 app = Flask(__name__)
 
@@ -12,6 +13,7 @@ app = Flask(__name__)
 CACHE_DURATION = 300  # 5 minuten cache voor API calls
 last_api_call = {}
 cached_data = {}
+executor = ThreadPoolExecutor(max_workers=3)  # Voor parallelle API calls
 
 def get_cached_data(key, fetch_func, duration=CACHE_DURATION):
     """Haal data uit cache of voer fetch_func uit als cache verlopen is"""
@@ -26,6 +28,15 @@ def get_cached_data(key, fetch_func, duration=CACHE_DURATION):
     last_api_call[key] = current_time
     return data
 
+def fetch_data_parallel():
+    """Haal alle data parallel op"""
+    futures = {
+        'weather': executor.submit(fetch_weather_data),
+        'sonos': executor.submit(fetch_sonos_zones),
+        'date': executor.submit(get_date_info)
+    }
+    return {key: future.result() for key, future in futures.items()}
+
 # Voeg cache-control headers toe voor statische bestanden
 @app.after_request
 def add_header(response):
@@ -322,14 +333,11 @@ def index():
 
 @app.route('/instellingen', methods=['GET', 'POST'])
 def instellingen():
-    settings = load_settings()
-    clips = [f for f in os.listdir(CLIPS_PATH) if f.endswith('.mp3') or f.endswith('.wav')]
-    alle_zones = fetch_sonos_zones()
-
     if request.method == 'POST':
         try:
             # Nieuwe volume instellingen
             if 'volume_day' in request.form and 'volume_night' in request.form:
+                settings = load_settings()
                 settings['volume_day'] = int(request.form['volume_day'])
                 settings['volume_night'] = int(request.form['volume_night'])
                 settings['night_start'] = request.form['night_start']
@@ -338,6 +346,7 @@ def instellingen():
                 settings['volume'] = settings['volume_day']
             else:
                 # Fallback: gebruik default waarden als velden ontbreken
+                settings = load_settings()
                 settings['volume_day'] = settings.get('volume_day', 15)
                 settings['volume_night'] = settings.get('volume_night', 8)
                 settings['night_start'] = settings.get('night_start', '20:00')
@@ -401,10 +410,14 @@ def instellingen():
             # Probeer alsnog door te gaan zonder de Pi volume instelling
             return redirect('/instellingen')
 
+    # Haal alle data parallel op
+    data = fetch_data_parallel()
+    
     return render_template('settings.html',
-                           settings=settings,
-                           alle_zones=alle_zones,
-                           clips=clips)
+                         settings=load_settings(),
+                         alle_zones=data['sonos'],
+                         date_info=data['date'],
+                         weather=data['weather'])
 
 @app.route('/api/hadith')
 def api_hadith():

adhan-webapp/done

@@ -14,3 +14,4 @@ Mon May 26 18:17:57 CEST 2025: Tijdzone probleem opgelost - Container gebruikt n
 2025-05-28 03:55:38 - Adzkaar scherm verbeterd naar kaart-voor-kaart weergave met navigatie knoppen en toetsenbord besturing
 Wed May 28 14:09:12 CEST 2025: Sonos debug tijd synchronisatie geïmplementeerd - get_current_volume functie en cron script gebruiken nu debug tijd API, volume bepaling werkt correct in debug mode
 2025-05-29 21:24:37 - Performance optimalisaties toegevoegd: caching voor API calls en instellingen
+2025-05-29 21:27:02 - UI optimalisaties toegevoegd: lazy loading, parallelle API calls en caching

adhan-webapp/templates/settings.html

@@ -4,8 +4,17 @@
   <meta charset="UTF-8">
   <title>Instellingen - Gebedstijden Display</title>
   <link rel="stylesheet" href="/static/style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script>
+    // Voorkom FOUC (Flash of Unstyled Content)
+    document.documentElement.style.visibility = 'hidden';
+    window.addEventListener('load', function() {
+      document.documentElement.style.visibility = 'visible';
+    });
+  </script>
 </head>
 <body class="settings-page">
   <div class="app">