PolymerFire and when the data is loading

tevinthuku

Follow

Feb 23, 2017 · 2 min read

I posted this tweet earlier this month

Here I am with a tiny demo explanation on how to show a loader when data from firebase has not arrived yet.

BTW. Ill be using polymer and polymerfire :)

We are going to have a simple query that sends down data from the books path in firebase

<firebase-query
 id=”querybooks” 
 path=”/books”
 data=”{{viewbooks}}”>
 </firebase-query>`

Great . That was simple and a dom-repeat template to show the data that has returned.

<template is="dom-repeat" items={{viewbooks}} 
      as=book>
        <li>[[book.name]]</li>
</template>

Awesome. We can ship this now…….. but there’s one problem.

Before the data comes from the query our users are going to see the white-screen-of-death

that wouldn’t be very nice.

That is why Im writing this post. To show you how to get rid of the white screen.

So we’ll start with … css . An awkward place to start but it will still work.

[hidden] {
   display: none !important;
 }

Yeap. The property hidden. We want to display a loader and hide it when the data has been loaded from firebase.

<ul class="grid" hidden="[[_hasBooks]]">    <li>
      <div class="animated_background"></div>
    </li>
    <li>
      <div class="animated_background"></div>
    </li>
    <li>
       <div class="animated_background"></div>
    </li>
 </ul>

Taaaddaaa!! Theres the mark up that we want to display when the data is loading and as you can see we want it to be hidden if hasBooks is true. What is hasBooks ?

_hasBooks: {
    type: Boolean,
    computed: '_computehasBooks(viewbooks.length)'
  },

Its a boolean whose value is computed by the function _computehasBooks

This function computes the length of the viewbooks array (which comes from firebase and returns true if the array length is greater than zero.

When the data is loading the array length is zero. Hope that makes sense.

_computehasBooks: function(books) {
     return books > 0;
 },

And there we have it.

So the loader or whatever you use will be hidden when the data finally loads from the query and will show when data hasn’t finished loading.

That’s it :)