Quickie: Animated loader/spinner during detail view-load

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Quickie: Animated loader/spinner during detail view-load

Post by jsetzer » 2020-03-02 15:37

Hi,

I was playing around with some new UI ideas. Obviously (but unfortunately) doing that kind of stuff JQuery needs some time for waiting until everything has been loaded and for moving elements around. User will see this kind of UI-surgery. This was annoying - at least for me - and so I have made up my mind how to hide the form at the beginning and show it after all changes have been done. Additionally I am showing an animated loader gif to provide feedback. Please compare by yourself:

Before

You can see the default form from the beginning on. But you can also see the "flickering" when elements are being moved around by code.
ezgif-1-d91b4a22df40.gif
ezgif-1-d91b4a22df40.gif (94.79 KiB) Viewed 18546 times

After

You cannot see the form at the beginning. There is just a loader-animation. As soon as the form is being shown, the layout has been finished.
ezgif-1-1101e2bda8df.gif
ezgif-1-1101e2bda8df.gif (60.98 KiB) Viewed 18546 times

Can you see the difference?
  • Without that hack (first video) you can see the form from the beginning on, but you can also see that element are being moved to new places
  • Using the hack (second video) you cannot see the form at the beginning, but as soon as you can see it, all layouting has been finished. In the meantime, there is a small loading animation (top left)

I know, it's only minimum. But somehow I love improving UI - even if it is only little.

You can give it a try: just add a few lines of code to your hooks/header-extras.php:

Code: Select all

<style>
    /* hide detail view from the beginning on */ .detail_view { display: none; }
    /* show spinner */ .page-header:after { content: url('loading.gif'); }
    /* prepare hiding spinner */ .page-header.loaded:after { content: ''; }
</style>
<script>
  // Attention: the next line of code requires AppGini Helper Javascript Libray
  new AppGiniDetailView().ready(function() { $j(".detail_view").show(); $j(".page-header").addClass("loaded"); });
</script>
Any feedback appreciated!
Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Quickie: Animated loader/spinner during detail view-load

Post by D Oliveira » 2020-03-02 19:47

Not gonna lie, while this is an ingenious solution it still took me a while to focus on that tiny wheel on the left, I was focusing in the center of page, maybe a loading bar centered would be better noticed, but thats just me, great work once again :)

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Quickie: Animated loader/spinner during detail view-load

Post by jsetzer » 2020-03-02 20:01

Yes, would be better, sure, but there is no div there I could use as anchor. Maybe I will have a look at absolute positioning. But this would lead to additional css code.

Thanks for your feedback!
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

UPDATED Quickie: Animated loader/spinner during detail view-load

Post by jsetzer » 2020-03-03 07:57

Hi,

I have managed to center the loader and additionally I have replaced the gif by a different animation:

Final result

OVtZcs0iY1.gif
OVtZcs0iY1.gif (97.42 KiB) Viewed 18501 times

Loading

65cGaFEMiK.gif
65cGaFEMiK.gif (14.54 KiB) Viewed 18501 times

When watching the screenrecording above, please don't wait for the page to load. it is an endless waste of time. It will not load :D
For demonstration purposes I have just screenrecorded the loader and hidden the form completely.



Updated code

There is only little change required:

Code: Select all

<style>
    /* hide detail view from the beginning on */
    .detail_view { display: none; }

    /* show spinner */
    .page-header:after {
        content: url('loading.gif');         /* <----- you can change the filename here */
    /* content: url('ajax-loader.gif'); */
        position: absolute; top: 200px; left: 50%;
    }


    /* prepare hiding spinner if page has been loaded completely */
    .page-header.loaded:after {
        content: '';
    }
</style>
<script>
    new AppGiniDetailView().ready(function() { $j(".detail_view").show(); $j(".page-header").addClass("loaded"); });
</script>


Custom loaders

You can create your own custom animated loaders for example on this site:
http://www.ajaxload.info/

After you have generated the loader, download it, copy it to the root directory of your application and name it "ajax-loader.gif". Then change the css code in hooks/header-extras.php as you can see in the comments above. You can name the file whatever you like and then you will have to change the filename in the css-code also.

The loader I have been using in the screenshot above has been attached to this post.


Best,
Jan

PS: You can download the loader I am using below
Attachments
ajax-loader.gif
ajax-loader.gif (404 Bytes) Viewed 18501 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools


User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: UPDATED Quickie: Animated loader/spinner during detail view-load

Post by D Oliveira » 2020-03-04 17:09

jsetzer wrote:
2020-03-03 07:57
Hi,

I have managed to center the loader and additionally I have replaced the gif by a different animation:

Final result


OVtZcs0iY1.gif


Loading


65cGaFEMiK.gif


When watching the screenrecording above, please don't wait for the page to load. it is an endless waste of time. It will not load :D
For demonstration purposes I have just screenrecorded the loader and hidden the form completely.



Updated code

There is only little change required:

Code: Select all

<style>
    /* hide detail view from the beginning on */
    .detail_view { display: none; }

    /* show spinner */
    .page-header:after {
        content: url('loading.gif');         /* <----- you can change the filename here */
    /* content: url('ajax-loader.gif'); */
        position: absolute; top: 200px; left: 50%;
    }


    /* prepare hiding spinner if page has been loaded completely */
    .page-header.loaded:after {
        content: '';
    }
</style>
<script>
    new AppGiniDetailView().ready(function() { $j(".detail_view").show(); $j(".page-header").addClass("loaded"); });
</script>


Custom loaders

You can create your own custom animated loaders for example on this site:
http://www.ajaxload.info/

After you have generated the loader, download it, copy it to the root directory of your application and name it "ajax-loader.gif". Then change the css code in hooks/header-extras.php as you can see in the comments above. You can name the file whatever you like and then you will have to change the filename in the css-code also.

The loader I have been using in the screenshot above has been attached to this post.


Best,
Jan

PS: You can download the loader I am using below
wow, now it looks amazing, thanks for that :)

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Quickie: Animated loader/spinner during detail view-load

Post by jsetzer » 2020-03-04 17:13

Thanks!
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Quickie: Animated loader/spinner during detail view-load

Post by onoehring » 2020-03-10 08:41

Hi Jan,

your solution works great. Nevertheless I want to ask for help/advice.
I am having the problem, that the spinner is also shown on the table view. For this it might be helpful to know, that in the page I am talking about I split table view from details: Details are opened not under the table, but on their own (without the tableview above).
In the table view, the spinner disappears after one minute (wrong), in the details view it works fine (once everything is loaded and formatted the results are displayed).

The animated image was to large (1 MB), so I uploaded it here: https://dl.olaf-noehring.de/?t=bf458366 ... d0905b6a63

Olaf

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Quickie: Animated loader/spinner during detail view-load

Post by jsetzer » 2020-03-10 09:06

Hi Olaf,
as you can see the most important part is based on plain CSS. You can change the selector to something that fits your specific layout

Code: Select all

<style>
    /* ... */

    /* show spinner */
    .USE_WHATEVER_SELECTOR_IS_USEFUL_FOR_YOU:after {
        content: url('ajax-loader.gif');
        position: absolute; top: 200px; left: 50%; /* CHANGE THE TOP VARIABLE ACCORDING TO YOUR NEEDS*/
    }

    /* prepare hiding spinner if page has been loaded completely */
    .USE_WHATEVER_SELECTOR_IS_USEFUL_FOR_YOU.loaded:after {
        content: '';
    }
</style>
You can also enable the spinner on detail views only. For simplicity reasons I have placed the code in header-extras.php. As soon as your combined tableview+detailview page has loaded completely, just add the class "loaded" to your selector.

Best,
Jan

PS: I cannot see your uploaded animation. I only get a single frame PNG with black areas.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools


User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Quickie: Animated loader/spinner during detail view-load

Post by jsetzer » 2020-03-10 10:31

onoehring wrote:
2020-03-10 08:41
The animated image was to large (1 MB), so I uploaded it here: https://dl.olaf-noehring.de/?t=bf458366 ... d0905b6a63
onoehring wrote:
2020-03-10 10:06
yes, it's an animated PNG. My Vivaldi (chromium) displays it correct.
The animated GIF ( https://dl.olaf-noehring.de/?t=cb9697c6 ... a71f7fd863 ) is 5.5 MB
OK, the GIF you have posted now, works.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Quickie: Animated loader/spinner during detail view-load

Post by jsetzer » 2020-03-10 10:33

Hi,

as mentioned before, add the css class "loaded" to the anchor you are using as soon as your combined tableview+detailview has loaded completely. This additional class "loaded" will hide the animated "loading" GIF.

And, as always, please also check if there are any further bugs in your Javascript code BEFORE, which could stop execution of javascript. If there are, the .addClass("loaded") may not be called at all.

Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

bescott53

Re: Quickie: Animated loader/spinner during detail view-load

Post by bescott53 » 2020-04-03 17:07

I love this, did anybody find out how to load only on detail view. i tried moving it to the -dv.js file but it still loads on table too

mysh_eireannach
Veteran Member
Posts: 35
Joined: 2016-02-16 22:31

Re: Quickie: Animated loader/spinner during detail view-load

Post by mysh_eireannach » 2020-06-11 09:54

Hi Jan

Could you give hint how I can make this layout as on the picture?

I plan use it with Inline Detail-View Plugin.

I need place my data like on the picture Detail view on the left, Child-table on the right and Buttons at the bottom.

Could you please share sample of code?

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Quickie: Animated loader/spinner during detail view-load

Post by jsetzer » 2020-06-11 10:05

Hi,

no, sorry. There is no simple "copy&paste" sample-code which I could share.

Regards,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

mysh_eireannach
Veteran Member
Posts: 35
Joined: 2016-02-16 22:31

Re: Quickie: Animated loader/spinner during detail view-load

Post by mysh_eireannach » 2020-06-11 10:11

Hi Jan,

Thanks anyway for promt reply.

I have another question regarding your plugin, but looks like I placed message in wrong part of forum. Could you look it please?

viewtopic.php?f=12&t=3690

User avatar
bruceholt
Veteran Member
Posts: 100
Joined: 2016-07-30 20:16
Location: Australia

Re: Quickie: Animated loader/spinner during detail view-load

Post by bruceholt » 2020-07-12 02:15

Love it but I am wondering if the issue of the loader displaying on the table view page has been rectified (unless I missed it) because on mine at least, it stays there.

ckebbell
Veteran Member
Posts: 32
Joined: 2020-01-28 18:09

Re: Quickie: Animated loader/spinner during detail view-load

Post by ckebbell » 2020-07-16 01:51

hi all

I am having the same issue as Bruceholt. The spinner stays in place on all tableviews and also it has affected one of the table detailviews (when I click on Add New for this table, the spinner stays in place for around 80secs before loading the add new screen for this table only.)

It doesn't happen on all tables, I am still experimenting but have found that it affects one table detail-view and all table views.

Has anyone managed to solve this - do I have to use the code in the detailview-js files only? I have used it in header extras but I see that Jan has recommended that it can be used in detail views only.
dvonly.JPG
dvonly.JPG (24.04 KiB) Viewed 9206 times
Thank you.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Quickie: Animated loader/spinner during detail view-load

Post by jsetzer » 2020-07-16 05:57

Good morning,

after a few of you have mentioned problems with loader-animation in table view, I did some research on a blank project and (hopefully) here is a solution for you:

If you still see the loader-animation in tableview (TV) you should use the slightly modified code (1 additional line) in hooks/header-extras.php:

Code: Select all

<!-- file: hooks/header-extras.php -->
<script src="hooks/AppGiniHelper.min.js"></script>
<style>
    .detail_view { display: none; } .page-header.loaded:after { content: ''; }
    .page-header:after { content: url('loading.gif'); position: absolute; top: 200px; left: 50%; }
</style>
<script>
    new AppGiniDetailView().ready(function() { $j(".detail_view").show(); $j(".page-header").addClass("loaded"); });
    $j.ajax("ajax_check_login.php"); // this line is new
</script>
Notes
  • This requires AppGiniHelper Javascript Library
  • You can replace loading-gif (line 5) by any other animated gif
  • You can create own loaders for example here: http://www.ajaxload.info/
Regards,
Jan
Attachments
ajax-loader.gif
ajax-loader.gif (2.55 KiB) Viewed 9199 times
4709325.gif
4709325.gif (16.89 KiB) Viewed 9199 times
5.gif
5.gif (14.94 KiB) Viewed 9199 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

ckebbell
Veteran Member
Posts: 32
Joined: 2020-01-28 18:09

Re: Quickie: Animated loader/spinner during detail view-load

Post by ckebbell » 2020-07-16 11:27

Thank you Jan!

It works perfectly now. And I have been really enjoying using the Helper library to make changes to my layout, which my company will make the most of :lol:

Thank you for all your assistance and contributions to AppGini development.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

SOLVED: Quickie: Animated loader/spinner during detail view-load

Post by jsetzer » 2020-07-27 19:24

Thanks, Christina. Happy to hear!
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

dharbitindy
Veteran Member
Posts: 101
Joined: 2019-05-26 18:38

Re: Quickie: Animated loader/spinner during detail view-load

Post by dharbitindy » 2020-08-09 23:23

This would be cool to implement when clicking the Save Changes button on the detail view as well. Any suggestions on the code to make that work?

Thanks,
David

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Quickie: Animated loader/spinner during detail view-load

Post by jsetzer » 2020-08-10 05:06

Good morning David,

a while ago, instead of a loading-animation, I have implemented a blur + grayscale effect on submit:

Preview

ezgif.com-optimize (2).gif
ezgif.com-optimize (2).gif (140.05 KiB) Viewed 8922 times

In the screen-recording above the effect can be seen for a few milliseconds, only. So I'm posting two still-pictures:

chrome_8jclylLbMs.png
chrome_8jclylLbMs.png (79.03 KiB) Viewed 8922 times
chrome_Pow1s6XIuF.png
chrome_Pow1s6XIuF.png (48.87 KiB) Viewed 8922 times

Code

You can try if this javascript works for you, too:

Code: Select all

jQuery(window).bind('beforeunload', function () {
    jQuery("form").closest(".row").css("filter", "grayscale(1) blur(4px)");
});
Regards,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Quickie: Animated loader/spinner during detail view-load

Post by jsetzer » 2020-08-10 05:19

For hiding the DV + showing animation:

Code: Select all

jQuery(window).bind('beforeunload', function() {
  $j(".detail_view").hide();
  $j(".page-header").removeClass("loaded");
});
FlYmQJDY0t.gif
FlYmQJDY0t.gif (169.24 KiB) Viewed 8922 times
i have reduced the speed so you can see the effect
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

dharbitindy
Veteran Member
Posts: 101
Joined: 2019-05-26 18:38

Re: Quickie: Animated loader/spinner during detail view-load

Post by dharbitindy » 2020-08-11 13:44

Good morning Jan,

Thank you for that! Does the above code go into the hooks/header-extras file, and is that all that is needed?

David

Post Reply