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

Question

I can easily show a loading message while the activate method is doing its thing like so:

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

However if I then update my ActiveVm property with a different viewmodel, the splash content does not show. I understand that the splash content is only designed to show on 'initial' load, but what options do I have for displaying such a message when transitioning from one viewmodel to another?

Note that this composition does not participate in routing...

Update: Related durandal issue here which might be of value to future visitors: https://github.com/BlueSpire/Durandal/issues/414

PW Kad · Accepted Answer · 2013-12-19T19:07:03.717

9

This begs for a comment of 'what have you tried?' but given that I could see the benefit of this for future users I wanted to throw in my $0.02 -

The splash displays on your screen until Durandal loads up the application and replaces the div with id="applicationHost" 's content with the shell view and the subsequent views that are loaded. If you wanted to make this a re-usable component one thing that you could do is to take that Html.Partial view that is being loaded and create your own view inside of your app folder in your Durandal project.

For example you would create a new HTML view inside of your app folder -

splashpage.html

<div class="splash">
    <div class="message">
        My app
    </div>
    <i class="icon-spinner icon-2x icon-spin active"></i>
</div>

And then compose it from your shell -

<div data-bind="if: showSplash">
    <!-- ko compose: 'splashpage.html' -->
    <!-- /ko -->
</div>

And in your view model you would toggle the observable showSplash whenever you want to show / hide it -

var showSplash = ko.observable(false);

var shell = {
    showSplash: showSplash
};
return shell;

And you could call that from your activate methods inside your other view models like this -

define(['shell'], function (shell) {

    function activate() {
        shell.showSplash(true);
        // do something
        shell.showSplash(false);
    }

});

edited Dec 19 '13 at 19:07

answered Dec 19 '13 at 19:00

PW Kad

14,953
7
49
82

Perhaps my use of the term "Splash screen" wasn't the best choice. This particular composition is just a small piece of my application. The "parent" viewmodel is not the shell and there will be more than one of these parent viewmodels as well. And anyways, it doesn't seem appropriate for the children viewmodel to be in charge of this behavior. – Shaun Rowan Dec 19 '13 at 20:39
The same fundamental approach applies - you just want to call it from some other area instead of from the child view models. My code is intended to be pseudo code for helping you come up with a solution that works for your application. – PW Kad Dec 19 '13 at 20:43
I think this is a reasonable solution. What about abstracting the show/hide logic into a "base" view model? That way the application logic doesn't have to be concerned with this functionality. – Joseph Gabriel Dec 20 '13 at 02:38
Agree, it's reasonable. Hopefully native support will be added so that children do not need to implement any special behavior to make it happen. – Shaun Rowan Dec 26 '13 at 16:06

score 5 · Answer 2 · answered Dec 19 '13 at 19:04

5

This sounds to me like a scenario where a custom transition may be useful. When the composition mechanism switches nodes in and out of the DOM, it can use a transition.

This page, under Additional Settings>Transition (about halfway down) describes a custom transition: http://durandaljs.com/documentation/Using-Composition/

answered Dec 19 '13 at 19:04

Joseph Gabriel

8,339
3
39
53

1

Won't the transition start *after* activate has completed? I need this to occur while activate is working. – Shaun Rowan Dec 19 '13 at 20:32
I agree with @Joseph Gabriel, this sounds like a good use case for a custom transition. Take a look at https://gist.github.com/jstott/6326038, which is based on Evan Larsen's initial CSS3 transitions for Durandal 1.2. In addition I'd probably go for a loading indicator that is activated whenever you swap out views. – RainerAtSpirit Dec 19 '13 at 22:03
@ShaunRowan - you are correct. A transition starts after the activate has completed. I'm not sure I understand the reasoning behind the behavior - seems the transition would start earlier in the process - not after the page has fully activated. I'll look into it a bit more - maybe there's something I'm missing. – Joseph Gabriel Dec 20 '13 at 02:15
@JosephGabriel Can you add your finding to https://github.com/BlueSpire/Durandal/issues/414 as well? – RainerAtSpirit Dec 21 '13 at 14:21

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

2 Answers2

Linked