Update templates/menu.html

templates/menu.html

@@ -7,6 +7,8 @@
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+    <!-- Preload Placeholder Image -->
+    <link rel="preload" href="/static/placeholder.jpg" as="image">
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -27,6 +29,11 @@
             margin: auto;
             display: flex;
             flex-direction: column;
+            opacity: 0; /* Initially hidden for lazy loading */
+            transition: opacity 0.3s ease-in-out;
+        }
+        .menu-card.visible {
+            opacity: 1; /* Visible when in viewport */
         }
         .menu-image {
             height: 200px;
@@ -332,24 +339,6 @@
             height: 40px;
             width: 40px;
         }
-        .loading {
-            display: none;
-            text-align: center;
-            margin: 20px 0;
-        }
-        .loading-spinner {
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #0FAA39;
-            border-radius: 50%;
-            width: 30px;
-            height: 30px;
-            animation: spin 1s linear infinite;
-            display: inline-block;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
         @media (max-width: 576px) {
             .modal-dialog {
                 max-width: 98%;
@@ -379,7 +368,7 @@
             </div>
         </div>
         <div class="search-bar-container">
-            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
+            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections...">
             <i class="bi bi-search search-icon"></i>
         </div>
     </div>
@@ -400,7 +389,7 @@
         </div>
     </form>
 
-    <div class="container mt-4" id="menu-container">
+    <div class="container mt-4">
         {% if selected_category == "Customized Dish" %}
             <div id="custom-dish-form" class="mt-4">
                 <h3>Create Your Custom Dish</h3>
@@ -417,56 +406,41 @@
                 </form>
             </div>
         {% else %}
-            <div id="menu-items">
-                {% for section, items in ordered_menu.items() %}
-                    <h3>{{ section }}</h3>
-                    <div class="row" data-section="{{ section }}">
-                        {% for item in items %}
-                            <div class="col-md-6 mb-4">
-                                <div class="card menu-card">
-                                    <img src="{{ item.Image1__c }}" 
-                                         srcset="{{ item.Image1__c }}?w=350 350w, {{ item.Image1__c }}?w=200 200w" 
-                                         sizes="(max-width: 576px) 200px, 350px" 
-                                         class="card-img-top menu-image" 
-                                         alt="{{ item.Name }}"
-                                         onerror="this.src='/static/placeholder.jpg';" 
-                                         loading="lazy">
-                                    <div class="addbutton">
-                                        <div class="card-body d-flex align-items-center justify-content-between">
+            {% for section, items in ordered_menu.items() %}
+                <h3>{{ section }}</h3>
+                <div class="row">
+                    {% for item in items %}
+                        <div class="col-md-6 mb-4">
+                            <div class="card menu-card">
+                                <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}"
+                                    width="350" height="200" loading="lazy"
+                                    onerror="this.src='/static/placeholder.jpg';">
+                                <div class="addbutton">
+                                    <div class="card-body d-flex align-items-center justify-content-between">
+                                        <div>
+                                            <h5 class="card-title">{{ item.Name }}</h5>
+                                            <p class="card-text">${{ item.Price__c }}</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-item-center justify-content-center">
                                             <div>
-                                                <h5 class="card-title">{{ item.Name }}</h5>
-                                                <p class="card-text">${{ item.Price__c }}</p>
+                                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
+                                                    onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
+                                                    ADD
+                                                </button>
                                             </div>
-                                            <div class="d-flex flex-column align-item-center justify-content-center">
-                                                <div>
-                                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
-                                                        onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
-                                                        ADD
-                                                    </button>
-                                                </div>
-                                                <div class="w-100 text-center">
-                                                    {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
-                                                        <h5 class="customisable-text">Customisable</h5>
-                                                    {% endif %}
-                                                </div>
+                                            <div class="w-100 text-center">
+                                                {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
+                                                    <h5 class="customisable-text">Customisable</h5>
+                                                {% endif %}
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                        {% endfor %}
-                    </div>
-                {% endfor %}
-            </div>
-            <div id="loading" class="loading">
-                <div class="loading-spinner"></div>
-                <p>Loading more items...</p>
-            </div>
-            {% if has_more %}
-                <div id="load-more" class="text-center my-4">
-                    <button class="btn btn-primary" onclick="loadMoreItems()">Load More</button>
+                        </div>
+                    {% endfor %}
                 </div>
-            {% endif %}
+            {% endfor %}
         {% endif %}
     </div>
 
@@ -531,91 +505,35 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 
     <script>
-        let currentPage = {{ page | default(1) }};
-        const perPage = {{ per_page | default(10) }};
-        const selectedCategory = '{{ selected_category }}';
-
-        function loadMoreItems() {
-            const loadingEl = document.getElementById('loading');
-            const loadMoreEl = document.getElementById('load-more');
-            loadingEl.style.display = 'block';
-            loadMoreEl.style.display = 'none';
-
-            currentPage++;
-            fetch(`/menu?category=${encodeURIComponent(selectedCategory)}&page=${currentPage}&per_page=${perPage}&ajax=1`)
-                .then(response => response.json())
-                .then(data => {
-                    if (data.ordered_menu) {
-                        appendMenuItems(data.ordered_menu);
-                        if (!data.has_more) {
-                            loadMoreEl.style.display = 'none';
-                        } else {
-                            loadMoreEl.style.display = 'block';
-                        }
+        // Lazy Load Menu Items with Intersection Observer
+        document.addEventListener('DOMContentLoaded', function () {
+            const menuCards = document.querySelectorAll('.menu-card');
+
+            const observer = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('visible');
+                        observer.unobserve(entry.target); // Stop observing once visible
                     }
-                    loadingEl.style.display = 'none';
-                })
-                .catch(err => {
-                    console.error('Error loading more items:', err);
-                    alert('Failed to load more items.');
-                    loadingEl.style.display = 'none';
-                    loadMoreEl.style.display = 'block';
                 });
-        }
-
-        function appendMenuItems(orderedMenu) {
-            const menuItemsContainer = document.getElementById('menu-items');
-            for (const [section, items] of Object.entries(orderedMenu)) {
-                let sectionEl = document.querySelector(`.row[data-section="${section}"]`);
-                if (!sectionEl) {
-                    const sectionTitle = document.createElement('h3');
-                    sectionTitle.innerText = section;
-                    menuItemsContainer.appendChild(sectionTitle);
+            }, {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.1 // Trigger when 10% of the card is visible
+            });
 
-                    sectionEl = document.createElement('div');
-                    sectionEl.classList.add('row');
-                    sectionEl.setAttribute('data-section', section);
-                    menuItemsContainer.appendChild(sectionEl);
-                }
+            menuCards.forEach(card => {
+                observer.observe(card);
+            });
+        });
 
-                items.forEach(item => {
-                    const itemHTML = `
-                        <div class="col-md-6 mb-4">
-                            <div class="card menu-card">
-                                <img src="${item.Image1__c}" 
-                                     srcset="${item.Image1__c}?w=350 350w, ${item.Image1__c}?w=200 200w" 
-                                     sizes="(max-width: 576px) 200px, 350px" 
-                                     class="card-img-top menu-image" 
-                                     alt="${item.Name}"
-                                     onerror="this.src='/static/placeholder.jpg';" 
-                                     loading="lazy">
-                                <div class="addbutton">
-                                    <div class="card-body d-flex align-items-center justify-content-between">
-                                        <div>
-                                            <h5 class="card-title">${item.Name}</h5>
-                                            <p class="card-text">$${item.Price__c}</p>
-                                        </div>
-                                        <div class="d-flex flex-column align-item-center justify-content-center">
-                                            <div>
-                                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
-                                                    onclick="showItemDetails('${item.Name}', '${item.Price__c}', '${item.Image2__c}', '${item.Description__c}', '${item.Section__c}', '${selectedCategory}')">
-                                                    ADD
-                                                </button>
-                                            </div>
-                                            <div class="w-100 text-center">
-                                                ${item.Section__c !== 'Apetizer' && item.Section__c !== 'Customized dish' && item.Section__c !== 'Soft Drinks' 
-                                                    ? '<h5 class="customisable-text">Customisable</h5>' 
-                                                    : ''}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    `;
-                    sectionEl.insertAdjacentHTML('beforeend', itemHTML);
-                });
-            }
+        // Debounce Function for Search
+        function debounce(func, wait) {
+            let timeout;
+            return function (...args) {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => func.apply(this, args), wait);
+            };
         }
 
         function showItemDetails(name, price, image, description, section, selectedCategory) {
@@ -817,7 +735,7 @@
 
         function filterMenu() {
             let input = document.getElementById('searchBar').value.toLowerCase();
-            let sections = document.querySelectorAll('#menu-items h3');
+            let sections = document.querySelectorAll('h3');
             let items = document.querySelectorAll('.menu-card');
             let matchedSections = new Set();
             
@@ -827,6 +745,7 @@
                 
                 if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
                     item.style.display = 'block';
+                    item.classList.add('visible'); // Ensure visible items are marked as such
                     matchedSections.add(item.closest('.row'));
                 } else {
                     item.style.display = 'none';
@@ -843,17 +762,11 @@
                     sectionRow.style.display = 'none';
                 }
             });
-
-            const visibleItems = document.querySelectorAll('.menu-card:not([style*="display: none"])');
-            const totalItems = {{ total_items | default(0) }};
-            const loadMoreEl = document.getElementById('load-more');
-            if (visibleItems.length < totalItems && input === '') {
-                loadMoreEl.style.display = 'block';
-            } else {
-                loadMoreEl.style.display = 'none';
-            }
         }
 
+        // Add Debounce to Search
+        document.getElementById('searchBar').addEventListener('keyup', debounce(filterMenu, 300));
+
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText;
             let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));