"Pull to refresh..." text reappears briefly after spinner is done

ionic-v1
1

I am using the pull to refresh to update a list of cards. Everything works but there’s a hiccup when it is done refreshing and closing.

The “Pull to refresh” text reappears for a split second before the refresher container closes.

Why would that text reappear and how to I make it not reappear? It ruins the UX.

The behavior should be:

  1. user pulls down slightly and sees the “Pull to refresh…” text and a down arrow. The actual refresh event is not yet fired.
  2. user continues to pull down, arrow now points up, indicating the refresh event will fire when user releases the touch
  3. User releases touch, and “pull to refresh…” text and the up arrow are replaced with the spinner.
  4. Spinner continues to spin while view is being refreshed
  5. When refreshing is complete and $scope.$broadcast('scroll.refreshComplete') is executed in the controller, spinner disappears while the refresh container slides back up.** <-- This is where “Pull to refresh…” reappears for a brief moment**
  6. View is refreshed. All is well.
2

Have you solve it? I have the same issue.

3

I think I found a work around.

Move your $broadcast(‘scroll.refreshComplete’) into a $timeout for 1 second.

It seems reappearing happens because your refreshing function finishes before ion-refresh animation is finished. Though it’s just a guess.

4

Good call, Sean. The refreshComplete was firing early. I didn’t need to use timeout. I simply changed:

myService.getData(query);
$scope.$broadcast('scroll.refreshComplete');

to

myService.getData(query).then(function() {
  $scope.$broadcast('scroll.refreshComplete');
});

It’s choppy, so I have to now figure out how to smooth it out.

Thanks!!