2

If im using firebase query How do I show a spinner when data is loading and get rid of it when its not loading. A nice demo would help. I dont seem to find anything in the docs.

  <firebase-query
    id="query"
    path="/category"
    data="{{viewcategory}}">
  </firebase-query>

Like this query for example

and this dom-repeat

<template is="dom-repeat" items="[[viewcategory]]" strip-whitespace>
  <div class="item">
    <a class="image-link" href$="[[_getCategoryHref(item)]]">
      <my-image src="[[item.profileimage]]" alt="[[item.name]]"></my-image>
    </a>
    <h2>[[item.name]]</h2>
    <my-button>
      <a aria-label$="[[item.name]] my Now" href$="[[_getCategoryHref(item)]]">VIEW</a>
    </my-button>
  </div>
</template>

How do I show the spinner before the items are loaded

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Tevin Thuku
  • 437
  • 1
  • 8
  • 19

1 Answers1

0
  1. create a div and add some csss which basicly says it should have full height + width of page (or the area where the dom repeat stamps the categories.. ) and some high z-index + desired background-color.
  2. add the paper spinner as a child of this div
  3. wrap everything in a dom-if and then check your data state with _loaded function...

so for example:

_loaded(d){
        if(d.constructor === Array){   // check if the passed arg is an Array 
     // here you can additionally check if length == 0 see comment below   
     return d.length > 0 ? false : true;
    } else {
     // no array here --> show the spinner.. 
     return true   
 }
 };
.spinner-container{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: red; /* debug color.. use your background color here*/
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;  
}
<template is="dom-if" if="[[_loaded(viewcategory)]]">
  <div class="spinner-container">
    <paper-spinner-lite active></paper-spinner-lite>
  </div>
</template>

If you use this, the spinner is spinning even when the query is finished but returned no results.. so if you want to display a message like "No Categories found" or similar (when query returns nothing) you can check if the length of the array is 0 and then return false and set another Boolean to true which activates another dom-if which displays the message... I dont know if this behaviour is in the documentation, but I found that quote:

firebase always returns empty array when query has no results

I assumed you are using Polymer 2.

Chwzr Lee
  • 21
  • 5