[PR #8278] [MERGED] fix: prevent page flickering on rapid sidebar clicks #8331

New issue

Closed

opened 2026-03-23 23:23:41 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 23:23:41 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/8278
Author: @RishiAhuja
Created: 10/9/2025
Status: ✅ Merged
Merged: 11/7/2025
Merged by: @LucasXu0

Base: main ← Head: fix/page-flickering-rapid-clicks-8252

📝 Commits (2)

c3e1a9e fix: prevent page flickering on rapid sidebar clicks
b5f74a8 refactor: improve deduplication to check both plugin and view IDs

📊 Changes

2 files changed (+39 additions, -1 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/workspace/application/tabs/tabs_bloc.dart (+21 -0)
📝 frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart (+18 -1)

📄 Description

Pull Request Description

Feature Preview

Before

https://github.com/user-attachments/assets/0ae313e2-71e3-4c47-92db-db6a06e7e0b4

After

https://github.com/user-attachments/assets/cd771f85-f5b2-4437-a340-fb9d49ff6d1a

What This PR Does

This PR fixes the page flickering issue that occurs when rapidly clicking between pages in the sidebar (#8252).

The Problem:
When users click rapidly between pages in the sidebar, all those clicks were being processed sequentially. Each click triggered a navigation event, causing the page to rapidly switch and re-render, creating a visible flickering effect (A→B→C→D).

I tried to implement a two-layer approach:

UI-level throttling: Added throttling in view_item.dart on the sidebar click handler. Subsequent clicks within a 200ms window are ignored. This interval feels instantaneous to the user but is effective at catching most unintentional rapid clicks.
Bloc-level deduplication: As a fallback, logic has been added to tabs_bloc.dart. The bloc now tracks the most recently opened plugin and its timestamp. If another request to open the same plugin arrives within a 500ms window, it is ignored. This prevents duplicate events from causing re-renders.

This implementation uses simple DateTime comparisons, avoiding the need for Timer objects or more complex state management, and is similar to the Debounce utility already used elsewhere in the codebase.

Files Modified:

lib/workspace/presentation/home/menu/view/view_item.dart - Added _handleViewTap() method with click throttling
lib/workspace/application/tabs/tabs_bloc.dart - Added plugin deduplication in openPlugin handler

Issues

Fixes https://github.com/AppFlowy-IO/AppFlowy/issues/8252

PR Checklist

My code adheres to AppFlowy's Conventions
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

Note: Manual testing performed on macOS. The fix prevents flickering while maintaining responsive navigation. Would appreciate testing on other platforms (Linux, Windows) to ensure consistency.

Summary by Sourcery

Prevent rapid navigation flicker by throttling sidebar taps and deduplicating plugin open events

Bug Fixes:

Throttle sidebar item taps within 200ms in view_item.dart to ignore rapid clicks
Deduplicate plugin open events within 500ms in TabsBloc to skip repeated navigation requests

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/8278 **Author:** [@RishiAhuja](https://github.com/RishiAhuja) **Created:** 10/9/2025 **Status:** ✅ Merged **Merged:** 11/7/2025 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `fix/page-flickering-rapid-clicks-8252` --- ### 📝 Commits (2) - [`c3e1a9e`](https://github.com/AppFlowy-IO/AppFlowy/commit/c3e1a9e1ab7c05c6e5b0d4fd00bd923cfa5b0e51) fix: prevent page flickering on rapid sidebar clicks - [`b5f74a8`](https://github.com/AppFlowy-IO/AppFlowy/commit/b5f74a84482de809c686125d60d10b8e7969416e) refactor: improve deduplication to check both plugin and view IDs ### 📊 Changes **2 files changed** (+39 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/workspace/application/tabs/tabs_bloc.dart` (+21 -0) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart` (+18 -1) </details> ### 📄 Description ## Pull Request Description  ### Feature Preview #### Before https://github.com/user-attachments/assets/0ae313e2-71e3-4c47-92db-db6a06e7e0b4 <br/> #### After https://github.com/user-attachments/assets/cd771f85-f5b2-4437-a340-fb9d49ff6d1a <br/> --- ### What This PR Does This PR fixes the page flickering issue that occurs when rapidly clicking between pages in the sidebar (#8252). **The Problem:** When users click rapidly between pages in the sidebar, all those clicks were being processed sequentially. Each click triggered a navigation event, causing the page to rapidly switch and re-render, creating a visible flickering effect (A→B→C→D). I tried to implement a two-layer approach: 1. **UI-level throttling**: Added throttling in `view_item.dart` on the sidebar click handler. Subsequent clicks within a 200ms window are ignored. This interval feels instantaneous to the user but is effective at catching most unintentional rapid clicks. 2. **Bloc-level deduplication**: As a fallback, logic has been added to tabs_bloc.dart. The bloc now tracks the most recently opened plugin and its timestamp. If another request to open the same plugin arrives within a 500ms window, it is ignored. This prevents duplicate events from causing re-renders. This implementation uses simple DateTime comparisons, avoiding the need for Timer objects or more complex state management, and is similar to the Debounce utility already used elsewhere in the codebase. **Files Modified:** - `lib/workspace/presentation/home/menu/view/view_item.dart` - Added `_handleViewTap()` method with click throttling - `lib/workspace/application/tabs/tabs_bloc.dart` - Added plugin deduplication in `openPlugin` handler --- ### Issues Fixes https://github.com/AppFlowy-IO/AppFlowy/issues/8252 --- #### PR Checklist - [x] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions) - [x] I've listed at least one issue that this PR fixes in the description above. - [ ] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [ ] All existing tests are passing. --- **Note:** Manual testing performed on macOS. The fix prevents flickering while maintaining responsive navigation. Would appreciate testing on other platforms (Linux, Windows) to ensure consistency. --- ## Summary by Sourcery Prevent rapid navigation flicker by throttling sidebar taps and deduplicating plugin open events Bug Fixes: - Throttle sidebar item taps within 200ms in view_item.dart to ignore rapid clicks - Deduplicate plugin open events within 500ms in TabsBloc to skip repeated navigation requests --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>