Skip to content
  • 0 Votes
    16 Posts
    1k Views
    cyberianC
    @zaasmi said in Google Custom Search API Key and CX ID to be configured: Would you like to show how to add a “Loading Spinner” to the HTML so users know the search is happening? A loading spinner is essential for a good user experience. Without it, the user might think the app is broken while the Python backend is busy talking to Google’s servers. Here is how to add a clean, CSS-only spinner that appears during the search and disappears once the image loads. 1. Add the CSS Spinner Add this to the <style> section of your index.html. It creates a classic rotating ring. /* The Spinner Animation */ .loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; display: none; /* Hidden by default */ margin: 10px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 2. Update the HTML Place the loader div right above your gallery so users see it immediately after clicking search. <div id="loader" class="loader"></div> <div class="gallery" id="gallery"></div> 3. Update the JavaScript Logic Modify your performSearch function to toggle the loader’s visibility using display: block and display: none. async function performSearch() { const query = document.getElementById('searchInput').value; const loader = document.getElementById('loader'); const gallery = document.getElementById('gallery'); if (!query) return; // 1. Show the loader loader.style.display = "block"; try { const response = await fetch(`http://127.0.0.1:5000/search?q=${query}`); const data = await response.json(); if (data.url) { const card = document.createElement('div'); card.className = 'card'; card.innerHTML = `<img src="${data.url}"><p>${query}</p>`; gallery.prepend(card); } } catch (error) { console.error("Error fetching image:", error); } finally { // 2. Hide the loader (whether it worked or failed) loader.style.display = "none"; } } Visualizing the Feedback Loop The loader bridges the gap between the user’s action and the server’s reaction. Why this matters for your Google API Because the Google Custom Search API can sometimes take 1-2 seconds to respond, a “silent” screen makes users click the button multiple times. Each click could potentially trigger a new API call, wasting your 100-query daily limit. The spinner tells the user: “I’m working, please wait.” Final Pro-Tip: Debouncing If you want to be extra safe, you can disable the “Search” button as soon as it’s clicked so the user cannot trigger multiple API requests until the current one finishes. // Add this inside performSearch document.querySelector('button').disabled = true; // Re-enable it in the 'finally' block document.querySelector('button').disabled = false;
Reputation Earning
How to Build a $1,000/Month World CUP LIVE Matches Live Cricket Streaming
Ads
File Sharing
Stats

12

Online

3.0k

Users

2.8k

Topics

8.5k

Posts
Popular Tags
Online User
| |