-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Description
Describe the bug
When navigating between pages in the application, multiple instances of certain functionalities (e.g., QR code scanner or other dynamic components) are created. This results in duplicate UI elements or overlapping functionality, causing confusion and potential performance issues.
To Reproduce
Steps to reproduce the behavior:
Navigate to a page that initializes a dynamic component (e.g., QR code scanner or file upload).
Perform an action (e.g., start scanning or upload a file).
Navigate to another page and then return to the original page.
Observe that the dynamic component is reinitialized, leading to duplicate instances or overlapping functionality.
Expected behavior
When navigating back to a page, the dynamic component should initialize only once, and there should be no duplicate UI elements or overlapping functionality.A clear and concise description of what you expected to happen.
Screenshots
Duplicate UI elements (e.g., multiple "Start Scanning" buttons).
Overlapping functionality (e.g., multiple scanner instances running simultaneously).
Recording.2025-04-25.082619.mp4
Desktop (please complete the following information):
same isuue in on all devices and browsers
Smartphone (please complete the following information):
same isuue in on all devices , OS and browsers
Additional context
The issue occurs because dynamic components (e.g., QR code scanner) are not properly stopped or cleared when navigating away from a page.
The initialization function does not check for existing instances before creating a new one.
This behavior can lead to performance degradation and a poor user experience.
Proposed Fix
Stop Components on Page Unload:
Use window.onbeforeunload or window.onunload to stop or clear dynamic components when the user navigates away from the page.
Check and Clear Existing Instances:
Before initializing a new instance of a dynamic component, ensure any existing instance is properly cleared.
Update Initialization Functions:
Add checks to ensure that components are not reinitialized if they are already running.
Test Navigation Scenarios:
Test navigating between pages to ensure components are properly stopped and reinitialized without duplication.