Polymer inline conditional, or, how do I display a loading image?

Question

If I wanted to display a loading image and I was using JQuery to populate my data, I would do something like this:

HTML

<div id="loadthis"><img src="loading.gif"></div>

JS

$('#loadthis').html("Received Data");

However, with Polymer, my template looks like this:

<div id="loadthis">{{receiveddata}}</div>

and I have this property:

Polymer({
    is: 'test-loading',
    properties: {
        receiveddata: {
            type: String,
            value: ''
        }
    }
});

I have tried simply putting html in the value for receiveddata but quickly discovered that won't work. I've also tried moustache syntax of {{#if}} etc, but that didn't work at all.

How can I display an image until the receiveddata property is populated?

As for displaying image till `receiveData` has value you can use `dom-if` — a1626, Sep 14 '16 at 12:39

score 0 · Accepted Answer · answered Sep 14 '16 at 13:56

Based on @a1626's comment mentioning dom-if I came up with this solution:

<div id="loadthis">
    <template is="dom-if" if="{{isloading}}">
        <img src="loading.gif">
    </template>
    <template is="dom-if" if="{{!isloading}}">
        {{receiveddata}} 
    </template>
</div>

Then I added an isloading property in my Polymer definition.

Polymer({
    is: 'test-loading',
    properties: {
        receiveddata: {
            type: String,
            value: ''
        },    
        isloading: {
            type: Boolean,
            value: true
        }
    }
});

Now I just set it to false when the data has loaded.

self.isloading = false;

score -1 · Answer 2 · answered Sep 14 '16 at 01:51

If you want to load local image dynamically, you should load it with full address.

For example, your loading.gif image is under folder /images/loading.gif or /views/loading/loading.gif. Though you can use it like <img src="loading.gif"> statically, once you want to use it dynamically, you should write this.receiveData = '<img src= "/images/loading.gif">'; or this.receiveData = '<img src= "/views/loading/loading.gif">';

Polymer inline conditional, or, how do I display a loading image?

2 Answers2