Pull down to refresh with JavaScript for iOS mobile Safari

I was recently looking at the new Twitter mobile webapp and was checking out their new features. They have now included fixed toolbars, custom scrolling, and pull to refresh. Their scrolling seems OK but apps like mobile Gmail and anything using Sencha Touch still feels way better. However their pull to refresh seemed really bad, it has a lot of flickering (like whenever the arrow changes from up to down), the loading state has no spinner, and the revealing / hiding of it is really jarring. It seems like it was quickly done and that the implementer had a hard time getting it to work properly in cooperation with the custom scrolling code.

Sencha pull to refresh

It seemed like this could be done better, so I set out to see if I could find better examples. The first example I found was here: http://www.codetick.com/demos/refresh/index.html


In this example, things are not much better. The scrolling is significantly better, there is no flickering or jarring hiding/showing, but there is also no loading state with a spinner, as soon as you release the new content appears and the widget is hidden. Another small problem I found with this example is that the arrow always spins counter clockwise, whereas it should spin counter clockwise when moving to the up orientation, and vice versa on the way down. This problem could be easily fixed though, here is an example code snippet of how the arrow orientation could be updated properly.

/**
 * @param {Element} arrowEl The HTML element containing the
 *     arrow image.
 * @param {PullState} pullState One of PEEKING, REVEALING,
 *     REFRESHING.
 */
function onPullStateChanged(arrowEl, pullState) {
  var label, rotation, refreshing;
  if (pullState == PEEKING) {
    rotation = 180;
    label = 'Pull down to refresh.';
  } else if (pullState == REVEALING) {
    rotation = 0;
    label = 'Release to refresh.';
  } else {
    label = 'Refreshing.'
    refreshing = true;
  }

  if (refreshing) {
    arrowEl.style.display = 'none';
  } else {
    arrowEl.style.WebkitTransform = '(0,0,0) ' +
        'rotate(' + rotation + 'deg)';
    arrowEl.style.display = 'block';
  }
}

The styling of the widget is also pretty wrong. The centering is done not of just the text, but the text and the arrow, whereas the text should be centered and the arrow should be to the left of the text wherever it is. Surprisingly, it seems that many developers are happy with this component, but I think it pales in comparison to the native libraries available and that we should try to do better for the mobile web.

Cubiq pull to refresh?

It seems that the cubiq scrolling library has included a pull to refresh component. This is explained here: http://cubiq.org/iscroll-4. Unfortunately I couldn't find any demos except for this youtube video
http://www.youtube.com/watch?v=Js_EjlH-UbQ

From the video, it looks like this implementation is in much better state then the Twitter implementation or the Sencha third party plugin, but it looks like it is still in the early stages of development.

Overall from what I can tell there are no good examples of pull to refresh in a mobile web app today. Hopefully something will be released soon that demonstrates how polished it can really be, and in a way that other developers can easily use to incorporate into their own applications.