Bloc: The Bloc not doing any Transitions between states ( RefresherIndicator )

Created on 10 May 2020  ·  4Comments  ·  Source: felangel/bloc

Describe the bug
I have followed the article for how to use the refresher with the bloc and it was really street forward, But I'm facing a kinda wired issue.

When I pull down the refresher the event fired normally but nothing happened, no transitions between states accrued. so the refresher indicator stuck up there rolling forever as states not been updated to make it stop.

When I tried to do a sample to put it here, I noticed the issue happens when I'm getting the data from a server ( making an HTTP call only ).

So if you remove the await client.get(xxx) and directly put some dummy data (array of obj) the refresher will work and the transition will occur.

The sample here

To Reproduce
Steps to reproduce the behavior:

  1. from the sample above click login
  2. open the console
  3. pull down the refresher
  4. you gonna notice that the refresher indicator will stick up there rolling and the event been fired but no Transitions between states
question

Most helpful comment

That usually depends on your requirements and what your UI needs to show. You could yield a CommentsLoading state before you make the request, don't extend Equatable or even add a DateTime prop to your state.

All 4 comments

Hi @heshaShawky

I've opened a PR https://github.com/heshaShawky/Adding-new-item-to-the-list-issue-repository/pull/2
Your code is fine. The refresher gets stuck because final comments = await commentsRepository.getAllComments(); will return the same comments when you refresh as when you initially load them; in this case your states will be equal so no transition will happen.

If you tap on the floating action button after they initially load you'll notice your refresher will complete; it does so because FAB adds a new comment before you refresh.

Hope it helps you 👍

If you tap on the floating action button after they initially load you'll notice your refresher will complete; it does so because FAB adds a new comment before you refresh.

Thanks a lot, Yes I have noticed that too but didn't realize is because the states are equals!!

So how to handle this situation in the UI how to check if no transition or changes been done so I can stop the indicator.

That usually depends on your requirements and what your UI needs to show. You could yield a CommentsLoading state before you make the request, don't extend Equatable or even add a DateTime prop to your state.

Just for reference if someone faces this as me:

The Solution is making a difference between states ( if you using Equatable ) like adding a lastUpdated field to the sate:

class PostsLoaded extends PostsState {
  //...
  final DateTime lastUpdated;  

  PostsLoaded({ /*...*/, DateTime lastUpdated}) : lastUpdated = lastUpdated ?? DateTime.now();

  @override
  List<Object> get props => [/*...*/, lastUpdated];
}

Or Just escape using Equatable

Was this page helpful?
0 / 5 - 0 ratings