Shimmer Loading With Firebase

The feature shimmer was first introduced by Facebook as a way of loading items into a listview. It gives users a distraction especially whenever a post, search result, profile pic etc loads slower than usual. Having it Integrated in your project is definitely worth it.

In this post, we'll know how to add this particular loading effect in your Sketchware Project. The shimmer will load items from the server Firebase. We'll also see how the effect will stop loading each time your items are loaded from the database.

First make sure you add these firebase details to your library. They are completely public for testing purposes.

I'll get you through everything in a ready-made Project. Both the loading shimmer and the items from Firebase will be loaded on recycleviews. Yeah i mean how cool is that.

It was initially possible in Listviews, which i did in this Video.

The 'add' button let's you push any value to the database. I had this idea to make testing easier. The 1st Recycleview is to load the effects and the 2nd to get all data from firebase. It's totally beginner-based. 

Pov: You can decide to use one recycleview for both functions, if you're good in sketchware that is.

If you already have the button in your design view, click on it and select 'OnButtonClick'. Sure it's familiar with everyone.
In the event create ;

1. a Map variable, mp
2. Firebase database components

Now do this....

Put the Map key frb to upload all your values to Firebase. You'll use it later to retrieve back the data. You can always use any other key you'd like but it has to remain constant everywhere. 

If you're wondering what's in the recycle_refresh Moreblock, you can check out the Topic's 

Head on and Create two customViews, both for the effect and Firebase data. 

Cust - for Firebase data
Cust2shimmer - for the effect

Connect the second customView to the 1st recycleview and cust to the 2nd. Click on the shimmer recycleview to reveal an onbind event. Click on it and do this: 

The reason i included a textview to the shimmer was to create more of them in the recycleview.
Do the same with recycleview2 Onbind ;

If you look closely, you'll notice 'frb' key. yes, the same key i used earlier. Make use of the key anywhere to retrieve specific Firebase data under it.

 

  Shimmer Effect Library   

We definitely need this library to make the effect work in the first place.

To get it we need to use a dependancy to download directly from Sketchware.

You can visit this Website anytime you like but for now I'll just paste the dependancy for everyone to copy.

dependancy: 

com.facebook.shimmer:shimmer:0.5.0

Go to Local library and click on the download icon.

You should see a dialog asking whether to select a D8 or Dx library compatibility. Select Dx and paste the dependancy 

Click on Start

Wait for the library to finish downloading, then tick it once it's on the list.

To make the shimmer effect visible on your linear, you'll need to convert it using this : 

com.facebook.shimmer.ShimmerFrameLayout

Head to your customView 'Cust2shimmer' and click on your linear meant to show the shimmer. Select convert and paste the above code

  Oncreate  

In this Event, we'll be able to control everything that happens when our Firebase application is opened/starts.

Create these components:

1. Request Network 
2. Shared preferences 
3. Timer

Drag a condition block and use the network component boolen 'isConnected' as the condition. We'll do this to check for connection as loading Firebase data requires mobile data or wifi. In addition, we'll show the shimmer effect temporarily when connection is on, you know, to give time for the data-loading. When the condition is true, load data from firebase in the following way

Now add another else condition but still in the true bracket. This one will check whether shared preferences contains any data. But why? To load the Shimmer effect before the data is loaded.

That should do it right. I used repeat to value 5 so i could multiply the number of shimmer effects in the recycleview. This number does not remain constant though. It updates according to the number of items from Firebase once they are loaded. This is the best part of this whole Project we're doing.

In the false or 'else' statement, code this condition that will only execute whenever there is no internet connection. 

Shared preferences is used here as well. It will show the same number of shimmer effect linears as the number of the previous loaded data from firebase, if you loaded recently.

Still under the main event tab, click on components to create a new component event called onChildAdded. You can create anything under the event tab by clicking on the red fab button with a plus icon. Click on it and do this: 

Again, to see what's in the recycle_refresh Moreblock, click on this video to find out or download the project below.

To save the "number' of items in Firebase, we'll use shared preferences set-data key in back button press event, that way saving is done every time you exit the application. 

That's it. At this point we should be done with everything. All you need to is compile the project. 

Once you open the app the shimmer layout effects should start loading.

Use the edittext to input values you want in firebase then use the button below it to add/push them to the server. Make sure you have internet connection for this to work.

The recycleview should immediately load the values from the database once you push them. Now exit the app using the back button.

If you'd like to skip the above explanation, you could always get the Project. Download it from Here. You can beta-test it and report any errors you come across below in the comments.