-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
fix: prevent page flickering on rapid sidebar clicks #8278
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
RishiAhuja
wants to merge
2
commits into
AppFlowy-IO:main
Choose a base branch
from
RishiAhuja:fix/page-flickering-rapid-clicks-8252
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
fix: prevent page flickering on rapid sidebar clicks #8278
RishiAhuja
wants to merge
2
commits into
AppFlowy-IO:main
from
RishiAhuja:fix/page-flickering-rapid-clicks-8252
+39
−1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Reviewer's GuideImplements a two-layer approach that throttles rapid sidebar clicks at the UI level and deduplicates consecutive plugin open events in the bloc to eliminate flicker during fast navigation. Sequence diagram for sidebar click throttling and plugin deduplicationsequenceDiagram
actor User
participant Sidebar (view_item.dart)
participant TabsBloc (tabs_bloc.dart)
participant Plugin
User->>Sidebar (view_item.dart): Clicks sidebar item
Sidebar (view_item.dart)->>Sidebar (view_item.dart): Check last click time
alt Click within 200ms
Sidebar (view_item.dart)-->>User: Ignore click
else Click after 200ms
Sidebar (view_item.dart)->>TabsBloc (tabs_bloc.dart): onSelected()
TabsBloc (tabs_bloc.dart)->>TabsBloc (tabs_bloc.dart): Check last opened plugin and time
alt Same plugin within 500ms
TabsBloc (tabs_bloc.dart)-->>Sidebar (view_item.dart): Ignore event
else New plugin or after 500ms
TabsBloc (tabs_bloc.dart)->>Plugin: Open plugin
end
end
Class diagram for updated click throttling and deduplication logicclassDiagram
class SingleInnerViewItem {
+onSelected(context, view)
}
class _SingleInnerViewItemState {
-DateTime? _lastClickTime
-static const _clickThrottleDuration
+void _handleViewTap()
}
SingleInnerViewItem <|-- _SingleInnerViewItemState
class TabsBloc {
-String? _lastOpenedPluginId
-DateTime? _lastOpenTime
-static const _deduplicationWindow
+openPlugin(plugin, view, setLatest)
}
File-Level Changes
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey there - I've reviewed your changes and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `frontend/appflowy_flutter/lib/workspace/application/tabs/tabs_bloc.dart:83-86` </location>
<code_context>
+ final now = DateTime.now();
+
+ // deduplicate. skip if same plugin was just opened
+ if (_lastOpenedPluginId == plugin.id && _lastOpenTime != null) {
+ final timeSinceLastOpen = now.difference(_lastOpenTime!);
+ if (timeSinceLastOpen < _deduplicationWindow) {
+ return;
+ }
+ }
</code_context>
<issue_to_address>
**question:** Deduplication logic may block legitimate rapid plugin switches.
This logic may block valid rapid switches between plugins with the same ID. Consider if this matches the desired UX, or if deduplication should use additional context like view ID.
</issue_to_address>
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
frontend/appflowy_flutter/lib/workspace/application/tabs/tabs_bloc.dart
Outdated
Show resolved
Hide resolved
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Pull Request Description
Feature Preview
Before
before.mov
After
after.mov
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 throttlinglib/workspace/application/tabs/tabs_bloc.dart
- Added plugin deduplication inopenPlugin
handlerIssues
Fixes #8252
PR Checklist
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: