Fixes #1808: Added UI Feedback on Poll Delay #1830

MritunjayTiwari14 · 2025-08-27T07:45:21Z

Pull Request: [Ink Splash Poll Vote Indicator Implementation](polls: Add UI feedback on vote button while request pending #1808)

Hello Moderators of Zulip Flutter,
This is Mritunjay Tiwari.
This is my first ever contribution to Zulip.

📌 My Solution

Implementation Video and Images

test_video.mp4

After looking at the Suggestion for the issue made by the moderators, implementation of a Ink Splash upon Tap on Poll Vote is successfully done.

So, the implementation of the Ink Splash Widget is done by replacing the container of the Poll Vote button with a Ink Widget and introducing InkWell and Material Widgets as its ancestors. Making the Material as its Ancestors allows the Splash on of the Ink on the Button which eliminate the risk of leaking of the Splash outside the Poll Vote Button.

Thank you for reviewing my contribution!

💻 Code Snippet

(Added Comments here only to explain the changes, Review the diff for the changes without the addition of the comments)

ConstrainedBox(
            constraints: const BoxConstraints(minWidth: 44, minHeight: 44),
            child: Padding(
              padding: const EdgeInsetsDirectional.only(
                end: 5, top: verticalPadding, bottom: verticalPadding),
              child: Material( //Personal Comments for PR: Eliminates the Leaking of the Ink Splash, Ink Splash is limited to the Material
                color: Colors.transparent,
                child: InkWell( //Personal Comments for PR: Indication to Ink To Splash the Ink on the _toggleVote button
                  onTap: () => _toggleVote(option),
                  child: Ink(  //Personal Comments for PR: Here we Replaced the Container with the Ink Widget
                    padding: const EdgeInsets.symmetric(horizontal: 4),
                    decoration: BoxDecoration(
                      color: theme.colorPollVoteCountBackground,
                      border: Border.all(color: theme.colorPollVoteCountBorder),
                      borderRadius: BorderRadius.circular(3)),
                    child: Center(
                      child: Text(option.voters.length.toString(),
                        style: textStyleBold.copyWith(
                          color: theme.colorPollVoteCountText, fontSize: 20))))))))
  }

apoorvapendse

Thanks for the PR @MritunjayTiwari14,
Let's fix up the commit message by following the commit style guidelines.

Something like:

poll: Display UI feedback on poll delay.

<description>

Fixes: #1808

Might be a better way to write this.
Feel free to add details and helpful info in the commit description.

apoorvapendse

Starting a thread in the #mobile-design channel might be useful to gain initial feedback on this.

MritunjayTiwari14 · 2025-09-02T12:47:45Z

Thanks for the PR @MritunjayTiwari14, Let's fix up the commit message by following the commit style guidelines.

Something like:
poll: Display UI feedback on poll delay.

<description>

Fixes: #1808
Might be a better way to write this. Feel free to add details and helpful info in the commit description.

Thank you very much for Reviewing! @apoorvapendse
The commit description has been successfully Updated as per commit style guidelines.

MritunjayTiwari14 · 2025-09-02T12:49:18Z

Starting a thread in the #mobile-design channel might be useful to gain initial feedback on this.

Okay, I will look forward into this Channel for further feedback.

apoorvapendse · 2025-09-02T12:52:57Z

Cool, let's line wrap the description to <= 70 characters per line.
See formatting guidelines.

alya · 2025-09-02T20:31:40Z

If we show a spinner, I'd expect it to appear on the poll, not blocking the user from reading their other messages.

MritunjayTiwari14 · 2025-09-03T04:13:04Z

Cool, let's line wrap the description to <= 70 characters per line. See formatting guidelines.

I will make sure to use line wrap in the Description from Now, thank you.

MritunjayTiwari14 · 2025-09-03T04:14:59Z

If we show a spinner, I'd expect it to appear on the poll, not blocking the user from reading their other messages.

Okay, I’ll work on implementing a spinner similar to the Zulip web poll system.

MritunjayTiwari14 · 2025-09-12T10:55:48Z

Improve Poll Vote Handling: Optimistic Updates with Store Synchronization

Video Testing of Solution

record.mp4

Background

While working on poll vote handling, we wanted the UI to feel responsive but also stay consistent with server-confirmed data.
Initially, the _toggleVote implementation in the widget relied only on server confirmation, which introduced noticeable lag before the UI updated.

The requirement was:

Keep the data layer (PerAccountStore) responsible for state updates.
Keep the UI layer focused only on rendering.
Provide fast feedback to the user without waiting for server round trips.

Difficulties Faced

Event Timing Uncertainty
- We initially explored detecting the exact time a vote change arrived from the backend using _modelChanged.
- This was difficult to reason about, fragile to implement, and created unnecessary complexity.
Lag Without Optimistic Updates
- If we waited only for server events, the user would experience noticeable delays before their vote appeared.
- This degraded the user experience and made the interface feel unresponsive.
Navigation & State Sync Issues
- At one point, we experimented with forcing UI rebuilds via navigation as a workaround to sync state.
- This was brittle and highlighted the need for a cleaner architecture.
Text Lifting Problem
- When votes were updated, the vote count text would sometimes “jump” or lift visually due to layout changes.
- This was solved by changing the alignment of the vote count to center, stabilizing its position during updates.

Resolution

After carefully studying the structure of the Poll model, the Model layer, and the API contract, we realized that a clean and reliable solution could be achieved by adopting optimistic updates with store synchronization:

When the user votes:
1. PerAccountStore immediately updates the local poll model (optimistic update).
2. A spinner or temporary UI state shows that the vote is “in progress.”
3. The submessage is sent to the server.
When the server confirmation (SubmessageEvent) arrives:
- The store reconciles the local state with the authoritative server state.
- Listeners are notified again, ensuring the UI reflects the final, confirmed state.

Outcome

Fast feedback: Users see their vote reflected instantly, avoiding lag.
Cleaner UI: Alignment changes and loading indicators make the vote count stable and visually consistent during updates.
Cleaner architecture: Store handles all state and reconciliation, while the widget focuses only on rendering.
Technical debt cleared: Earlier issues around timing, _modelChanged misuse, and navigation hacks were fully resolved.
Edge case tested: Added testing to handle abrupt or multiple simultaneous vote updates to ensure the UI and store remain consistent.
Informed design: The final solution was arrived at only after a thorough study of the Poll structure, model APIs, and event flow in the codebase.

MritunjayTiwari14 · 2025-09-12T13:55:42Z

Extremely sorry for not removing the import that i used in my previous commit but then refactored my code so that it was not required which caused CI error. I have fixed that in the latest commit.

apoorvapendse

We don't want to keep merge commits in the PR branch.
Can you rebase this branch with upstream/main?

MritunjayTiwari14 · 2025-09-17T03:59:01Z

We don't want to keep merge commits in the PR branch. Can you rebase this branch with upstream/main?

Sure!

MritunjayTiwari14 · 2025-09-17T04:49:11Z

@apoorvapendse Extremely Sorry for the inconvenience caused, when i tried to clean my commit history to start a fresh rebase. Git automatically closed this issue because it didn't found any commit from my origin/main.

I have reopen the PR after rebasing upstream/main.

In this commit, we added Material, InkWell and Ink Widget to account for the Ink Splash effect for UI feedback. Fixes: zulip#1808

MritunjayTiwari14 · 2025-09-23T08:44:57Z

@gnprice It will be really helpful if I could get your feedback on the Updated Description of the Pull Request.

gnprice

Thanks @MritunjayTiwari14, and thanks @apoorvapendse for the previous reviews! A couple of comments below.

Linking also the #mobile-design thread here: #mobile-design > loading indicator on voting in poll

gnprice · 2025-09-23T18:19:30Z

lib/widgets/poll.dart

-              child: Padding(
-                // For accessibility, the touch target is padded to be larger
-                // than the vote count box.  Still, we avoid padding at the
-                // start because we want to align all the poll options to the
-                // surrounding messages.
-                padding: const EdgeInsetsDirectional.only(


What's the reason for deleting this comment? Seems like it's still equally relevant.

gnprice · 2025-09-23T18:20:57Z

lib/widgets/poll.dart

+                color: Colors.transparent,
+                child: InkWell(
+                  onTap: () => _toggleVote(option),
+                  child: Ink(


What's the effect of this Ink widget? Does the UI behave any differently if you take it out?

This catches my eye because we don't currently use an Ink widget anywhere else in the app (while we use Material and InkWell all the time).

apoorvapendse reviewed Sep 2, 2025

View reviewed changes

MritunjayTiwari14 force-pushed the main branch from b87d1bb to 3ddc690 Compare September 2, 2025 12:44

MritunjayTiwari14 requested a review from apoorvapendse September 12, 2025 10:56

apoorvapendse reviewed Sep 16, 2025

View reviewed changes

MritunjayTiwari14 closed this Sep 17, 2025

MritunjayTiwari14 force-pushed the main branch from 880bc90 to 536cbb7 Compare September 17, 2025 04:32

MritunjayTiwari14 reopened this Sep 17, 2025

MritunjayTiwari14 requested a review from apoorvapendse September 17, 2025 05:04

MritunjayTiwari14 force-pushed the main branch from 5ad755c to af40234 Compare September 20, 2025 12:41

MritunjayTiwari14 closed this Sep 20, 2025

MritunjayTiwari14 force-pushed the main branch from af40234 to 3730c90 Compare September 20, 2025 13:03

poll: Display UI feedback on poll delay.

ce79d54

In this commit, we added Material, InkWell and Ink Widget to account for the Ink Splash effect for UI feedback. Fixes: zulip#1808

MritunjayTiwari14 reopened this Sep 21, 2025

gnprice reviewed Sep 23, 2025

View reviewed changes

Fixes #1808: Added UI Feedback on Poll Delay #1830

Are you sure you want to change the base?

Fixes #1808: Added UI Feedback on Poll Delay #1830

Conversation

MritunjayTiwari14 commented Aug 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request: [Ink Splash Poll Vote Indicator Implementation](polls: Add UI feedback on vote button while request pending #1808)

📌 My Solution

Implementation Video and Images

💻 Code Snippet

Uh oh!

apoorvapendse left a comment

Choose a reason for hiding this comment

Uh oh!

apoorvapendse left a comment

Choose a reason for hiding this comment

Uh oh!

MritunjayTiwari14 commented Sep 2, 2025

Uh oh!

MritunjayTiwari14 commented Sep 2, 2025

Uh oh!

apoorvapendse commented Sep 2, 2025

Uh oh!

alya commented Sep 2, 2025

Uh oh!

MritunjayTiwari14 commented Sep 3, 2025

Uh oh!

MritunjayTiwari14 commented Sep 3, 2025

Uh oh!

MritunjayTiwari14 commented Sep 12, 2025

Improve Poll Vote Handling: Optimistic Updates with Store Synchronization

Video Testing of Solution

Background

Difficulties Faced

Resolution

Outcome

Uh oh!

MritunjayTiwari14 commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

apoorvapendse left a comment

Choose a reason for hiding this comment

Uh oh!

MritunjayTiwari14 commented Sep 17, 2025

Uh oh!

MritunjayTiwari14 commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MritunjayTiwari14 commented Sep 23, 2025

Uh oh!

gnprice left a comment

Choose a reason for hiding this comment

Uh oh!

gnprice Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

gnprice Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MritunjayTiwari14 commented Aug 27, 2025 •

edited

Loading

MritunjayTiwari14 commented Sep 12, 2025 •

edited

Loading

MritunjayTiwari14 commented Sep 17, 2025 •

edited

Loading