Description:
I am currently investigating a duplicate HTTP request issue in an Angular application and would like to understand the possible causes and how to troubleshoot it.
Environment
Angular: 20.1.x
Node.js: 22.19.0
TypeScript: 5.8.3

Observed Behavior
On a specific screen, a single user action (e.g., clicking a button) is expected to trigger only one HTTP request. However, in some cases, two identical requests are sent to the backend.
From log analysis:
1.There is a small time gap between the two requests (a few seconds)
2.Both requests are successfully processed by the backend
3.No other API requests appear between these two requests
4.This behavior looks like two separate triggers, rather than a single action causing duplicate emissions

Possible Scenario 1 (Page Refresh)
1. The user clicks a button
2. The page enters a loading state
3. The user refreshes the page (e.g., presses F5) during loading
4. After reload, the same request is triggered again

Possible Scenario 2 (Delayed UI Update → Second Click)
1. The user clicks the button and the request is sent successfully
2. The backend returns a successful response
3. However, due to UI update delay (e.g., change detection or rendering delay), the screen still shows the previous state
4. The user assumes the first click did not work and clicks again
5. A second request is triggered and also completes successfully

At this point, I suspect this is more related to UI / user interaction rather than Angular automatically sending duplicate requests.

Questions
1. Has anyone encountered a similar duplicate HTTP request issue in Angular? What was the root cause?
2. If this is caused by unnecessary re-rendering or change detection, how can it be effectively diagnosed?
3. In Angular, how can we prevent duplicate requests that might be indirectly triggered by component re-rendering?
4. What are the recommended approaches to prevent duplicate requests caused by user double actions, such as:
disabling the button during processing
debouncing click events
using a request-in-progress flag

I would appreciate any insights, debugging strategies, or best practices. Thank you!