fix: debounce clock timer and lite mode updates to prevent simulator …

[kunal-10-cloud]

Fixes #847

Describe the changes you have made in this PR -

This PR fixes simulator crashes caused by rapid clock timer adjustments and Lite Mode toggles.

• Debouncing Implementation: Introduced a debounce utility to rate-limit expensive canvas resizing and interval resets.
• Clock Optimization: Applied a 300ms debounce to changeClockTime to prevent interval overflow.
• Lite Mode Stability: Applied a 150ms debounce to resetup() calls when toggling Lite Mode.
• Re-entrancy Guard: Added a boolean flag in setup.js to prevent recursive resetup() loops.
• Unit Testing: Included a standalone test file for the debounce utility to ensure its reliability.

Screenshots of the UI changes (If any) -

---

Code Understanding and AI Usage

Did you use AI assistance (ChatGPT, Claude, Copilot, etc.) to write any part of this code?

• No, I wrote all the code myself
• Yes, I used AI assistance (continue below)

If you used AI assistance:

• I have reviewed every single line of the AI-generated code
• I can explain the purpose and logic of each function/component I added
• I have tested edge cases and understand how the code handles them
• I have modified the AI output to follow this project's coding standards and conventions

Explain your implementation approach:

--What problem does your code solve?
The code addresses a critical stability issue where the simulator would crash or freeze during rapid user interactions. Specifically, adjusting the clock time or toggling "Lite Mode" triggered immediate, heavy, synchronous operations. When these events fired in quick succession, they created a cascading execution pile-up that overwhelmed the browser's main thread.

--What alternative approaches did you consider?
I considered using a simple throttle instead of a debounce, but throttling would still allow multiple expensive resetup calls to execute while the user is actively clicking, which is unnecessary. I also considered adding a global "loading" overlay to block UI during updates, but that would significantly degrade the user experience and feel sluggish.

--Why did you choose this specific implementation?

I chose a combination of debouncing and re-entrancy guards.

• Debouncing is the most efficient way to handle UI inputs because it waits for the user to "settle" on a value before executing the heavy lifting.

• The re-entrancy guard in setup.js provides a second layer of defense. It ensures that if a resize or setup event is somehow triggered while another is already running, it exits immediately rather than creating a recursive loop. This "double-locking" approach makes the simulator virtually immune to this specific crash vector.

--What are the key functions/components and what do they do?
I implemented a reusable utility in debounce.ts to rate-limit expensive updates, which is now used by changeClockTime in simulationArea.ts(300ms) and changeLightMode in engine.js(150ms) to ensure interval resets and mode toggles occur only after user interaction settles. Additionally, I added an isResettingUp state guard in setup.js to block re-entrant calls to the resetup function, while debounce.test.ts provides a dedicated test suite to verify the utility's timing and reliability.

Checklist before requesting a review

• I have added proper PR title and linked to the issue
• I have performed a self-review of my code
• I can explain the purpose of every function, class, and logic block I added
• I understand why my changes work and have tested them thoroughly
• I have considered potential edge cases and how my code handles them
• If it is a core feature, I have added thorough tests
• My code follows the project's style guidelines and conventions

---

Note: Please check Allow edits from maintainers if you would like us to assist in the PR.

Summary by CodeRabbit

• New Features

  • Added debounced handling for light mode switching and clock interval updates.

• Bug Fixes

  • Prevented overlapping reset operations with a re-entrancy guard.

• Tests

  • Added unit tests covering debounce behavior and argument propagation.

• Chores

  • Minor cleanup and removal of a trailing TODO comment.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	fe97113
🔍 Latest deploy log	https://app.netlify.com/projects/circuitverse/deploys/69786181d7852e00085ae63a
😎 Deploy Preview	https://deploy-preview-848--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 47 (no change from production) Accessibility: 73 (no change from production) Best Practices: 92 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

This change adds a debounce utility and applies it in the simulator: a new debounce function is introduced at src/simulator/src/utils/debounce.ts; engine.js uses a debounced resetup (150ms); simulationArea.ts uses a debounced clock-time updater (300ms) and exports changeClockTime from the simulationArea object; setup.js gains a re-entrancy guard (isResettingUp) around reset logic. Unit tests for the debounce utility were added, the SimulationArea interface gained an optional _debouncedChangeClockTime property, and a trailing TODO was removed from a Vue file.

Possibly related PRs

• Fix Clock Settings Functionality and Improve UI #384 — Adds a debounced changeClockTime and exports it from simulationArea, touching the same clock-update integration this change modifies.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding debounce to clock timer and Lite Mode updates to prevent simulator crashes, which matches the core objective of the PR.
Linked Issues check	✅ Passed	All coding requirements from issue #847 are met: debounce utility implemented, applied to changeClockTime (300ms) and resetup (150ms), and re-entrancy guard added to prevent recursive calls.
Out of Scope Changes check	✅ Passed	The removal of a trailing TODO comment in ProjectProperty.vue is a minor cleanup unrelated to the debouncing fix but does not significantly impact scope.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/simulator/src/simulationArea.ts`:
- Around line 61-73: The changeClockTime implementation uses `this` and
`this._debouncedChangeClockTime`, which breaks when `changeClockTime` is
imported/destructured and called unbound; update the function body to reference
the module-level `simulationArea` object directly (use
`simulationArea._debouncedChangeClockTime`, `simulationArea.timePeriod`, and
`simulationArea.ClockInterval`) and remove `this` uses so the logic that
clears/sets `simulationArea.ClockInterval` and calls the debounced function
works whether called as a method or as the exported/destructured
`changeClockTime`.

[aryanndwi123]

Hey @kunal-10-cloud there are lot of merge conflict can you resolve it