Hi there,

Is there anyway to add in a loading image while an ajax tab is loading? Thanks!

Comments

Flying Drupalist’s picture

Category: support » feature

Hmm I second this!

And please don't use a custom image, use one of the ones that already comes with drupal.

pasqualle’s picture

Title: Add ajax loading image » provide processing icon for ajax tabs
najibx’s picture

QT getting hotter !

katbailey’s picture

OK, I've made a first pass at providing a progress bar for ajax-loaded tabs. When the new dev snapshot is up, please test and provide your feedback here.

pasqualle’s picture

Nice changes in the quicktabs.js file. Feels much more cleaner. And I really like the progress bar, good choice.. I am looking forward for the support requests about how to theme the progress bar ;)

small issues:
The automatic scroll on views tabpages makes an unwanted effect when the quicktab is in the top section of the page, as the place where I clicked gets hidden with the scrolldown. Maybe I should create a video on this one, as I can't describe it clearly..
I think instead of scrolling to newly loaded content the height (or min-height) property could be set for the quicktabs_wrapper in css, therefore the tab content will be visible without a scroll. I am even thinking about a new feature request as setting quicktab width and height property on the QT admin interface.

I think the string "Loading" can't be translated.

If I try to create a freetext type tabpage in ajax quicktab, then the progress bar is shown for that tabpage but it does not stop. I am not sure if that is a problem or not, as freetext does not work with ajax quicktab..

katbailey’s picture

Hi Pasqualle,
yeah I added in that views scrolling code just because it was added in in the ajax callback for the pager links in ajax_view.js (in Views) so thought it might be good here but maybe I should take it out.
Nice catch on the 'Loading' text - that should totally be passed through Drupal.t()

I haven't even tried freetext type tabpages yet!! I have a hard time keeping up with you :-P Anyway, will look into that and make sure the progress bar does not show up.
thanks,
Katherine

Flying Drupalist’s picture

Why use that huge thing? :( Please just stick with a small throbber, like views!

katbailey’s picture

Well, the processing icon needs to appear in the container div, not in the tab itself (because putting a throbber inside the tab could potentially mess up the layout of the tabs if space is tight) so I felt a progress bar was more appropriate and it's the main one that comes with core, as you suggested above. However, if you would like to mock up a wireframe of an alternative way of doing this, please feel free to submit it here.

Flying Drupalist’s picture

Thanks for the explanation. Since it comes with core I don't really mind then, it doesn't look very pretty but I guess that's the themer's job. :)

highvoltage’s picture

That's a pretty standard loading bar, looks fine to me. I see it all the time. Good work in my opinion.

pasqualle’s picture

Status: Active » Fixed

The small issues I mentioned are solved already, so I would call this issue as fixed..

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.