How to place a loading indicator above a button

[rbahumi]

Hi,

I am trying to place a loading indicator on top of a 'Post' button. The post button is placed inside a container (because the setMasked() is under the container API), and that container is placed inside a toolbar.

Issue is, because the toolbar is narrow, the loading indicator appears on the bottom-left corner of the tool bar, instead of being placed above the 'Post' button.
indicator.jpg
Any idea how can that be fixed?

[bricemason]

What is the purpose of masking the toolbar? Is it to prevent further interaction while you're processing the Post button or aesthetics or both?

If it's to prevent further interaction, it makes more sense to call setMasked() on the whole view (not just the container inside the toolbar). If you truly want to prevent interaction with only the items in the toolbar it might be better to just disable the controls you want and display your own message.

If you don't think these ideas fit your scenario, please post more details with what you want to accomplish along with any relevant code samples.

Brice

[rbahumi]

What is the purpose of masking the toolbar? Is it to prevent further interaction while you're processing the Post button or aesthetics or both?

I have 2 screens:
1. The first screen that contains the Toolbar and users posts. On this screen the user cannot change anything, therefor it doesn't require a 'login'.
2. The second screen, is where the user can post new reports, this screen requires a login. (pressing the the button with text 'Post' on the first screen, will transform the user to this screen)

The Toolbar itself is part of the first screen. It contains a single button, initially with the text 'Login'. When the user presses the login button, a Facebook connect attempt happens, and the mask is shown. When the login process has finished, the button text will be replaced with the text 'Post'.

If you don't think these ideas fit your scenario, please post more details with what you want to accomplish along with any relevant code samples.
Brice

Note: The indicator below the toolbar (The one I showed in my previous post ) belonged to a plugin, it is not part of the containers mask. However, the container's indicator still has a fixed frame, which a I wish to change - so the indicator will appear on top of the button.

I have simplified the code, so the problem can be differentiated from the context. In this example there is a 'Login' button: when tapped, it shows the loader and the button text switches to 'Post'.
Here is the picture of the loading indicator (the Toolbar height is set to 200, otherwise it wont show)

loading.png

Remember to add to this line to the sass file: @include sencha-loading-spinner;
And the app.js code :

Ext.application({
    name: 'Surfspace',
    requires : ['Ext.tab.Panel', 'Ext.dataview.List', 'Ext.plugin.PullRefresh',],
    
    launch: function() {
        Ext.fly('appLoadingIndicator').destroy();
        var newButton = {
            xtype: "button",
            text: 'Login',
            ui: 'decline',
            id: 'newbutton',
            handler: function(){
                Ext.getCmp('newbuttoncontainer').setMasked({
                //Ext.getCmp('reportlisttoolbar').setMasked({
                    xtype: 'loadmask',
                    message: '',
                    indicator: true
                });
            
                var button = this;
                button.setText('Post');
            },
            scope: newButton
        };
        
        var newbuttoncontainer = { 
            xtype: 'container',
            id: 'newbuttoncontainer',
            layout: 'hbox',
            items: [ newButton ],
            };
        
        var topToolbar = {
            xtype: "toolbar",
            height: 200,
            title: 'Reports',
            docked: "top",
            id: 'reportlisttoolbar',
            items: [
                { xtype: 'spacer' },
                newbuttoncontainer
            ]
        };
    
        Ext.Viewport.add(topToolbar);
    }
});

[bricemason]

I think I understand what you're saying although it still seems strange to have that container in the toolbar with the button.

I have an alternative method of handling this, not sure how silly or weird it is but it's a thought. Here's what I did with your 'newbutton'

var newButton = {
    xtype: 'button',
    data: 'Login',
    ui: 'decline',
    id: 'newbutton',
    tpl: [
        '<div class="x-loading-spinner">',
            '<span class="x-loading-top"></span>',
            '<span class="x-loading-right"></span>',
            '<span class="x-loading-bottom"></span>',
            '<span class="x-loading-left"></span>',
        '</div>',
        '<span class="x-button-label">{.}</span>'
    ].join(''),
    handler: function() {
        this.setDisabled(true);
        this.addCls('x-loading');
        this.setData('Loading');
    }
};

along with the styles to match:

#newbutton {
   .x-loading-spinner {
      display: none;
      font-size: 100%;
      float: left;
      margin-right: 2px;
   }


   .x-button-label {
      text-overflow: clip;
   }


   &.x-loading {
      .x-loading-spinner {
         display: block;
      }
   }
}

The button contains a template with the loading spinner included, but hidden by default. When the button is clicked, the button is disabled, a new label applied, and the css class used to show the spinner is added.

You could modify the spinner color to suit your needs, not sure if this is even acceptable to you.

Brice

[rbahumi]

Thanks Brice, I really like your solution.

Do you know any good article/explanation regarding the "loading-spinner" CSS?
For example, what are the 'x-loading-<top|bottom|right|left>' and how to play with them?

And thanks again. It is a great solution.

[bricemason]

To customize the color, there is a css var for it:

http://docs.sencha.com/touch/2-1/#!/...-spinner-color

but the best resource (and most fun to look at) is always the source. The partial scss for the spinner is located here:

sdk-directory/resources/themes/stylesheets/sencha-touch/default/widgets/_loading-spinner.scss

and is worth a read.

Brice