Undocumented YUI TabView Feature

We've been using dojo at work for a while now but bugs in its UI components have really prevented us from doing everything that we wanted with it. Lately, I've started switching our code over to use YUI instead and have been surprised at how easy it's been.

One of the most critical components for us is the TabView component. While the docs for YUI are generally pretty good, I couldn't figure out how to display a "Loading..." image when dynamically pulling in data for a tab until I stumbled over this undocumented gem. Suppose you declare your tabs like so:

<div id="myTabs" class="yui-navset">
  <ul class="yui-nav">
    ...
  </ul>
  <div class="yui-content">
    ...
  </div>
</div>

Then adding the following CSS rules will automatically do the trick:

#myTabs .loading {
  background-image: url(/images/loading.gif);
  background-position: center center;
  background-repeat: no-repeat;
}
#myTabs .loading * {
  display:none;
}

I stumbled over this while checking out the examples for the Bubbling Library's Dispatcher YUI plug-in, which in turn solves the problem of executing JavaScript in the dynamically loaded content.