Mr Speaker

Little animated-gif indicator AJAX thingos

a spinnera spinnera spinnera spinnera spinnera spinnera spinnera spinnera spinnera spinnera spinnera spinner

I've mentioned "spinner" on this page a bunch of times - I hope that's what they are called... "little animated-gif indicator AJAX thingos" doesn't sound quite right.

Anyway, just thought I'd mention this "issue" I've noticed quite a bit with people implementing spinners like so:

  1. Load spinner image in HTML
  2. When AJAX procedure completes, use javascript to hide the spinner.

This is hunky dory - but accounts poorly for us wise folk using the no-script extension.

Everyone knows smart people use no-script these days, so developers often allow for this by putting something like "Dude, gotta have AJAXZ on! Lol!" on the page. If it's a particularly interesting page, then us smart no-script users will then "temporarily allow this page" and off we go. A sound user experience.

The only problem is if you've put a spinner on the page using the method outlined above. Without javascript enabled the spinner just... spins. And spins. There are a large number of sites (like, greater than 10... but probably less than 1350) that I've seen this on.

The "rogue spinner" can happen even if javascript is enabled but something has gone a-miss, and the devs have been too lazy to implement time-out handlers.

Who cares?

Well, a spinning spinner means the intertubes are calculating stuff. So just wait. And wait. I've got 20-odd tabs open in Firefox that have been spinning for months now that I can't close, 'cause I have a great respect for the spinner - They calculate the intertubes.

To summerise this overly long post: please don't water-down the awesome communication power of the spinner. If you are going to use javascript to hide a spinner, then also use it to get it there in the first place. And make sure you remember to turn them off, even if something goes wrong.

To us developers, spinners may just seem like stupid and incredibly tacky animated gifs but, to the public they represent an infallible direct command: DON'T BLOODY TOUCH ANYTHING AWWRIGHT?! JUST FEAKIN' WAIT!

a spinner

6 Comments

  1. FIRST!

    I believe in some circles they call ’em “Throbbers”, although in other circles a throbber means something else entirely.

    You make a good point though, I’m trying to stick to the rule of “if it’s a visual cue for a javascript controlled event then it should be shown and hidden by javascript” (gotta think of a catchier name for that rule), but I am guilty of throwing a spinner into a background via CSS – it’s just so damn easy…

    btw ur site totally pwns lolz. kkthxbai!

    Monday, November 26, 2007 at 8:21 am | Permalink
  2. I like to use JavaScript to apply/remove a class to the holder of the throbber.
    Then CSS is still in control the presentation and JavaScript is locking down the behaviour.
    And it’s still just so darned easy …

    Monday, November 26, 2007 at 11:22 am | Permalink
  3. Sparkles?

    Monday, November 26, 2007 at 12:49 pm | Permalink
  4. Yeah of course Sparkles. It is pretty easy, no excuse to be sloppy really.

    By the way, never make your own throbber again.

    Monday, November 26, 2007 at 8:18 pm | Permalink
  5. Tee hee… make your own throbber.

    Err. Shut up!

    Monday, November 26, 2007 at 9:23 pm | Permalink
  6. This little blog entry has most definitely inspired me to fix my recent band wagon hop on of broken throbber(ers): Err before they pop up everywhere I’ve been; like some rampant vagrant flasher that found an abandoned briefcase full of Viagra on the park bench. :)+’

    Friday, November 30, 2007 at 12:20 am | Permalink
Captcha! Please type 'radical' here: *
How did you find this thingo? *