easy durandal please wait while loading spinner

Question

Is there an easy durandal way to clear the view and put a loading or please wait... on the screen so the user gets some feedback to know that it is working until the ajax content loads?

Right now when I click on a something that navigates to a child route and that child route loads a module that has to do a lot of stuff in activate(), it does not switch the nav or clear the screen or give any feedback to the user that it is working and I see them clicking many times over and over and getting frustrated, then just about when they want to give up, the page loads in fine.

I would like to make this default functionality for my app and not have to do something special in every module or on every page, is that possible?

Thanks.

Erikas Pliauksta · Accepted Answer · 2013-12-25T00:29:18.050

3

Have you tried to use router.isNavigating? Original Durandal template contains a spinner like this:

<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
    <i class="icon-spinner icon-2x icon-spin"></i>
</div>

edited Dec 25 '13 at 00:29

answered Dec 23 '13 at 23:45

Erikas Pliauksta

1,402
1
14
22

Thanks. That worked, sort of, but I ended up using $.blockUI and a flag in a global module to implement this myself instead because: Turns out I really needed to be able to use it not just on loading but in other places also, plus is not modal, appears off to one side where it is barely noticeable, etc. This simple solution posted here is correct, but not that great. Another correct answer would be - Durandal does not have a good modal please wait built in, you have to build your own. – pilavdzice Dec 24 '13 at 20:32

score 2 · Answer 2 · edited May 23 '17 at 12:12

A large percentage of the time, what you're looking for can be obtained very simply via:

<div data-bind="compose:ActiveVm">
    <div class="text-center" style="margin : 75px">
        <i class="fa fa-spinner fa-spin"></i>
    </div>
</div>

The inner div can be any arbitrary markup which will display while the viewmodel is going through activation.

Note that this currently only displays the placeholder content the first time this dom section is composed. If you have a section of your application which is being updated via an observable viewmodel + compose approach, you could use the approach here:

Durandal: Showing a 'LOADING...' during composition

For anyone visiting from the future, this issue might be worth checking out in case native support for this is desired:

https://github.com/BlueSpire/Durandal/issues/414

easy durandal please wait while loading spinner

2 Answers2