The AI Search Block module currently exhibits two issues that impact on user experience and potentially server/API performance:
1. **Submit button remains enabled after click, allowing for multiple submissions:** After a user clicks the search submit button, the button does not become disabled. This allows users to click the button repeatedly while a search request is processing.
2. **Repeated button clicks lead to page breakage and multiple API requests:** If a user clicks the submit button multiple times in quick succession, it triggers multiple search requests to the configured AI model API concurrently. This leads to:
* **Performance degradation:** The page can become unresponsive or appear to "break" until the latest API request completes, as multiple requests compete for resources.
* **Increased load on the AI model API:** Sending numerous requests unnecessarily increases the load on the external AI service and potentially costs if the API usage is metered.
* **Poor user experience:** The user might perceive the search as slow or broken due to the page unresponsiveness.
1. **Install and configure the `ai_search_block` module** on a Drupal 10 site, ensuring it is connected to a functional AI model API.
2. **Place the "AI Search Block"** in a visible region on your Drupal site (e.g., the header or sidebar).
3. **Navigate to a page** where the AI Search Block is visible.
4. **Enter a search query** into the AI Search Block's search field.
5. **Click the "Search" submit button.**
6. **Immediately after clicking the "Search" button, click it repeatedly,** multiple times in quick succession (e.g., 3-5 times or more).
**Expected behavior:**
* The "Search" submit button should be disabled immediately after the first click to prevent further clicks until the search results are returned.
* Only one search request should be sent to the AI model API for each distinct search submission.
* The page should remain responsive while the search request is being processed.
**Actual behavior:**
* The "Search" submit button remains enabled after being clicked, allowing for repeated clicks.
* Each click of the "Search" button triggers a new and separate request to the AI model API.
* Repeatedly clicking the button causes the page to become unresponsive or appear broken until the last submitted request is processed. You may observe delays or errors in the browser's developer console related to the API requests.
The proposed resolution involves implementing the following:
1. **Disable the submit button on click:** Modify the JavaScript or form handling logic of the AI Search Block to disable the "Search" submit button immediately after it is clicked.
2. **Re-enable the submit button after request completion:** Implement logic to re-enable the "Search" submit button once the response from the AI model API has been received and processed, or after a timeout period if an error occurs.
3. **(Optional but Recommended) Implement request cancellation or queueing:** For a more robust solution, consider implementing a mechanism to:
* **Cancel previous pending requests:** If a new search request is submitted while a previous one is still processing, the older request could be cancelled (if feasible with the chosen AI service).
* **Queue requests:** Implement a queue to manage search requests, ensuring only one request is active at a time and subsequent requests are queued until the current one completes. This might be more complex but would further prevent overloading the API and improve page responsiveness.
The primary goal is to prevent multiple concurrent requests and ensure the button's state accurately reflects the search processing status.
The primary UI change will be the behavior of the "Search" submit button:
* **Visual feedback:** The "Search" button will be visually disabled (e.g., grayed out, change in cursor) after being clicked, indicating to the user that their request is being processed and preventing further clicks.
* **Improved user experience:** Users will experience a more responsive and predictable search interaction as unintended multiple submissions are prevented.
It is anticipated that **no public API changes** will be required for this issue.
Active
1.0
Code
You are absolutely right and I already created a ticket for this:
https://www.drupal.org/project/ai_search_block/issues/3510772
✨
Debounce the submit button.
Active
I'll close the other one as your description is more complete.
Automatically closed - issue fixed for 2 weeks with no activity.