Redesign recipe list

js/app.js

@@ -1,9 +1,43 @@
-import { getRecipeListHTML, setupRecipeList } from './views/RecipeList.js?v=2';
-import { getFilterHTML, setupFilter } from './views/Filter.js?v=2';
-import { getRecipeDetailHTML, setupRecipeDetail } from './views/RecipeDetailV2.js?v=2';
-import { getMealPlannerHTML, setupMealPlanner } from './views/MealPlanner.js?v=20';
-import { getPantryHTML, refreshPantry, setupPantry } from './views/Pantry.js?v=2';
-import { getMealPlanEditorHTML, setupMealPlanEditor } from './ui/mealPlanEditor.js?v=7';
+const APP_ASSET_VERSION = window.__APP_ASSET_VERSION__
+    || new URL(import.meta.url).searchParams.get('v')
+    || 'dev';
+
+let getRecipeListHTML;
+let setupRecipeList;
+let getFilterHTML;
+let setupFilter;
+let getRecipeDetailHTML;
+let setupRecipeDetail;
+let getMealPlannerHTML;
+let setupMealPlanner;
+let getPantryHTML;
+let refreshPantry;
+let setupPantry;
+let getMealPlanEditorHTML;
+let setupMealPlanEditor;
+
+const moduleLoadPromise = Promise.all([
+    import(`./views/RecipeList.js?v=${APP_ASSET_VERSION}`),
+    import(`./views/Filter.js?v=${APP_ASSET_VERSION}`),
+    import(`./views/RecipeDetailV2.js?v=${APP_ASSET_VERSION}`),
+    import(`./views/MealPlanner.js?v=${APP_ASSET_VERSION}`),
+    import(`./views/Pantry.js?v=${APP_ASSET_VERSION}`),
+    import(`./ui/mealPlanEditor.js?v=${APP_ASSET_VERSION}`),
+]).then(([
+    recipeListModule,
+    filterModule,
+    recipeDetailModule,
+    mealPlannerModule,
+    pantryModule,
+    mealPlanEditorModule,
+]) => {
+    ({ getRecipeListHTML, setupRecipeList } = recipeListModule);
+    ({ getFilterHTML, setupFilter } = filterModule);
+    ({ getRecipeDetailHTML, setupRecipeDetail } = recipeDetailModule);
+    ({ getMealPlannerHTML, setupMealPlanner } = mealPlannerModule);
+    ({ getPantryHTML, refreshPantry, setupPantry } = pantryModule);
+    ({ getMealPlanEditorHTML, setupMealPlanEditor } = mealPlanEditorModule);
+});
 
 function getAppToastHTML() {
     return `
@@ -96,26 +130,52 @@ function setupTabs() {
     };
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-    const appContainer = document.getElementById('app-container');
+let initAppPromise = null;
 
-    appContainer.innerHTML = `
-        ${getRecipeListHTML()}
-        ${getMealPlannerHTML()}
-        ${getPantryHTML()}
-        ${getBottomNavHTML()}
-        ${getRecipeDetailHTML()}
-        ${getFilterHTML()}
-        ${getMealPlanEditorHTML()}
-        ${getAppToastHTML()}
-    `;
+async function initApp() {
+    if (initAppPromise) return initAppPromise;
 
-    setupTabs();
-    setupThemeToggle();
-    setupRecipeList();
-    setupMealPlanner();
-    setupPantry();
-    setupFilter();
-    setupMealPlanEditor();
-    setupRecipeDetail();
-});
+    initAppPromise = (async () => {
+        await moduleLoadPromise;
+
+        const appContainer = document.getElementById('app-container');
+        if (!appContainer) return;
+
+        appContainer.innerHTML = `
+            ${getRecipeListHTML()}
+            ${getMealPlannerHTML()}
+            ${getPantryHTML()}
+            ${getBottomNavHTML()}
+            ${getRecipeDetailHTML()}
+            ${getFilterHTML()}
+            ${getMealPlanEditorHTML()}
+            ${getAppToastHTML()}
+        `;
+
+        setupTabs();
+        setupThemeToggle();
+        setupRecipeList();
+        setupMealPlanner();
+        setupPantry();
+        setupFilter();
+        setupMealPlanEditor();
+        setupRecipeDetail();
+    })().catch((error) => {
+        initAppPromise = null;
+        throw error;
+    });
+
+    return initAppPromise;
+}
+
+function bootApp() {
+    initApp().catch((error) => {
+        console.error('Failed to initialize app', error);
+    });
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', bootApp, { once: true });
+} else {
+    bootApp();
+}