Loading Indicator...

[Romans Malinovskis]

For those who haven’t noticed yet - the latest agile toolkit has a lovely loading indicator of two animated cogs. Those are animated with HTML5 and visually resemble the cogs from Agile Toolkit logo. 

If you get any visual problems in displaying them, please post the screenshots to me. Perhaps I should set the minimum dimensions of the content which is being loaded.

Additionally the dialogs will initially open taller than they were before and will not disappear for a moment.

Regards,

--

I am working with my team on a VERY URGENT project now. I apologize for the delay in answering your email(s).

Romans Malinovskis is the author of the revolutionary PHP Framework: the “Agile Toolkit” (www.agiletoolkit.org). Please show your support by raising awareness about Agile Toolkit.

Refer commercial web development projects towards our skilled developer team: http://www.agiletech.ie/company/

NEW: Our London team is hiring Lead Developer: http://bit.ly/TbqfyY

NEW: Learn Agile Toolkit with over 10 hours of practical screencast footage: htttp://agiletoolkit.org/tutorial 

[mss mmb]

Hi
And where is this? any demo?

[The Black Pig]

Hi Romans is there a flag or setting to disable this?

The loading indicator is sweet but it overlays on the labels of the add/edit form on a CRUD and doesn't disappear.  See a grab here:

http://www.evernote.com/shard/s57/sh/d0c8d5a8-9905-4d37-b55d-398a63df1943/7bceb1c40e5e0da23e7d67942458a9b6

S

[Romans Malinovskis]

you need to clean cache. 

--
 
 

--

I am working with my team on a VERY URGENT project now. I apologize for the delay in answering your email(s).

Romans Malinovskis is the author of the revolutionary PHP Framework: the “Agile Toolkit” (www.agiletoolkit.org). Please show your support by raising awareness about Agile Toolkit.

Refer commercial web development projects towards our skilled developer team: http://www.agiletech.ie/company/

NEW: Get Agile Toolkit Book for your iPad: http://itunes.apple.com/us/book/web-development-agile-toolkit/id574342586?ls=1

[The Black Pig]

I've cleared the browser cache and that hasn't fixed it.

It's only a minor annoyance, I can address it later. 

[The Black Pig]

Hi Romans,

I'll move the discussion back here so it has more relevance for search etc.

You said:

Ok, if that’s an issue, I’d like to hear more about it. 

file ui.atk4_loader.js

        if(this.options.cogs){

            var l=$(this.options.cogs);

l.prependTo(self.element);

            l.hide();

            self.loader=l;

        }

and then in line 254 after loading is done, it hides itself:

},function(){ // second callback, which is always called, when loading is completed

            self.loader.hide();

self.loading=false;

});

If that is not working, you can try moving the loader.hide() method to line 177, after $.atk4.get(), which will hide cogs sooner, before the content is ready to be displayed still.

I have pulled the latest master from Git and the problem persists, even if I move the hide() call to line 177.

[Romans Malinovskis]

Please give me output from the JS console.

[The Black Pig]

Ah - I've just restyled the site and load my own CSS - so it's no longer an issue.

However, ignoring the changes (by renaming my local templates folder) - I no longer see the gears at all...and there is nothing in the console.

[Willem Rheeder]

Hi Roman,

Is there a way to activate these onSubmit and de-activate once processing is done?

Regards,

Willem

[Gowrav Vishwakarma]

I am git master but still I am not able to see this indicator ...

[Gowrav Vishwakarma]

I am ON git master (hehehe .. sorry for my silly typing mistake)

--
 
 

--
Regards

Gowrav Vishwakarma
Man of Affairs, Digital Vish, Xavoc International
http://www.digitlavish.com : +91 9783807100
http://www.xavoc.com

--------------------------------------------------------------------
Never Never Never Never Never Never Never Never Never Never Never Never Never Never Never  GIVE UP

[Imants Horsts]

I have the same question as Willem has and also - is there a way to activate/deactivate loading indicator manually with JS? It's not only when form is submitted, but also in some particular situations when you have to make a nice delay in execution of your on-page JS.

Is there a way to disable loading indicator at all in ATK configuration? In some cases it could be useful.

Speaking about visual look of loading indicator, it's not always nice to see it (because it's big). Especially when you reload small elements of your page and these gears suddenly "jump into" your small object, make it bigger for a while, and later after loding is done - dissapear and make your small object small again.

For example when you're loading Grid expander, then loading indicator are shown below that line which call expander. It's not showing inside expander container, but it's going over next grid lines... In this case also text "Loading..." is shown under gear image. See screenshot made with Chrome.

Next example - CRUD, after saving Form data.

This last problem can be dealt in two ways:

1) Add .loading {z-index:9999} in atk4-main.css

2) Or append <div class="loading"> and not prepend. I mean - put it as last-child and not first-child or reloaded container + set position top:0, left:0;

[Imants Horsts]

Gowrav - strange why you're not seeing it. It's working fine for me, except - it's not showing on Form submit, but only on Ajax based loads / reloads.

It's at least for Chrome and Firefox. Internet Explorer will not show anything nice in this case.

I just tested and:

Newest Chrome version - show animated indicator.

Newest FireFox - show not animated indicator.

Internet Explorer 8 - show only one and not animated gear.

I'll look into details a bit later. Maybe I can fix at least part of the problem here.

On Thursday, November 29, 2012 2:03:21 PM UTC+2, Gowrav Vishwakarma wrote:

[Imants Horsts]

Fixed some glitches with loading indicator here - https://github.com/atk4/atk4/pull/175.

Fixed browser compatibility (animation for all) except of course for IE. For IE8 made a small fix to at least show correctly this indicator even if it's not animated.

[Imants Horsts]

I just checked related problem with absence of loading indicator on form submit and it can be done / made in multiple ways. I'm not sure which one is better:

1) start-atk4.js, function GET, show indicator in beforeSend() and remove it in complete() method.

Good thing about this is, that it'll work even when you simply try to load additional CSS or JS file, or do anything else with AJAX requests.

Bad thing is... actually the same - indicator will show up sometimes even if you're kinda not doing anything (loading, submitting) because of background ajax processes. One more bad thing is, that there is no scope - so you can position this indicator only globally on page.

2) atk4_univ.js, function AJAXEC, show indicator before $.atk4.get() function call, and remove it inside callback function of $.atk4.get().

Good thing - it works only for special "Ajax" calls like form submitting.

Bad thing - I'm not sure if it'll work in all form submission cases. I tried only some. For example with button column in Grid (POST request) ir works, but don't work with Form saving (POST) request...

[Romans Malinovskis]

Merged.

Vadym have added the post-submit event, which can be used to hide the progress bar and re-enable the form fields.

This would be a great addition to the toolkit.

p.s. atk4_loader can take an option which will disable loading indicator: atk4_loader({cogs: false })…. This can be patched on atk4_expander , line 50. 

div.atk4_loader({cogs:false}).atk4_loader(‘loadURL’,this.element.attr(‘rel’),function(){…………

if you can try it and give it some test, it would be great for expander and form field reloader. Line 203 of atk4-form

Romans

--
 
 

--

Join our IRC Support channel: http://irc.lc/freenode/atk4 or irc://irc.freenode.net/atk4 

Romans Malinovskis is the author of the revolutionary PHP Framework: the “Agile Toolkit” (www.agiletoolkit.org). Please show your support by raising awareness about Agile Toolkit.

If you need help with your commercial Agile Toolkit project, consider using our dev team: http://www.agiletech.ie/company/

[Romans Malinovskis]

Hi

Both are generic and does not assume presence of any UI elements.

However both functions take callback argument which can be used to hide the loader. You can also set up timer which will hide loader if it takes too long. The best place for the loader on the form would be ui_form.js

r

--
 
 

--

Join our IRC Support channel: http://irc.lc/freenode/atk4 or irc://irc.freenode.net/atk4 

Romans Malinovskis is the author of the revolutionary PHP Framework: the “Agile Toolkit” (www.agiletoolkit.org). Please show your support by raising awareness about Agile Toolkit.