How to Implement Dynamic Loader with Lottie and Firebase

Using Lottie, Firebase Remote Config and UserDefaults we can change our app Loader or Spinner over the air without releasing a new app update

Mukesh Mandora
Jun 15, 2020 · 4 min read

Pre-requisite

  • Install Lottie and Firebase SDK in to your app.
  • You need a app registered to your Firebase account, follow this link to setup Firebase and Remote Config in to your iOS project.
  • Get the URL as shown in screenshot of Lottie file you want to add from the Lottie site, follow this link.
Screenshot of creating parameter in Firebase Remote config

UserDefaults

  • We will be needing some sort of storage to save our loader in the app after downloading, In this tutorial we will tak UserDefaults help.
  • I have shared a gist of UserDefaults with propertywrapper which is most of inspired from John Sundell tutorial.
  • This code helps us to save custom Codable object in the UserDefaults. If you have look the Lottie file code it is mostly JSON code, The animation rule is written in JSON and Lottie framework plays it using that JSON file
  • So this is reason we need custom UserDefaults wrapper to save our Lottie JSON file
Code for custom UserDefaults Codable Backed Wrapper

Lottie Module Code

  • I will not cover the part on how to integrate Lottie in iOS, follow this link
  • Lottie iOS framework has inbuilt method to load the file from URL we will we will use that.
AnimationView(url: lottieURL,
closure: completion,
animationCache: LRUAnimationCache.sharedCache)
  • When you deep dive LRUAnimationCache code you will see it implements AnimationCacheProvider which is custom protocol and inside it LRUAnimationCache has implemented the all the logic to store the animation file.
  • Definitely LRUAnimationCache will not work for our use case, We will create our own custom AnimationCacheProvider, Below I have shared the gist of LottieAnimationCache for your reference.
  • You will see we have used our custom UserDefaults wrapper inside it to store our Lottie JSON Loader for our app.
Code for custom Lottie Animation Cache
AnimationView(url: lottieURL,
closure: completion,
animationCache: LottieAnimationCache.sharedCache)

Final Step

  • Now we have setup the core module let’s play with it
  • We will first create the Lottie AnimationView which will load the JSON and add it to the subview, Consider the scenarion you are making network request and you have to show spinner , Instead if spinner you show Lottie AnimationView
  • I have written custom method which return AnimationView . This method take care of fail safe condition also which we discussed earlier
Screenshot of code to create AnimationView

Following are steps we will follow as shown in above screenshot

  1. We will first create AnimationView instance and load it with default fail safe loader.
  2. We will first download the Lottie URL from Remote Config.
  3. We will check if it URL is cache or not
  4. If the URL is not cached we will download it and save it in our custom cache which we discussed above and store it in UserDefaults and return the default fail safe loader until our loader gets downloaded
  5. If the URL is cached we will load the AnimationView with our Lottie URL and return our Lottie from Remote Config
  6. Now with just few line of code we can loader in any part of our app, I have created extension over UIView to add it for following example.

Thank you for reading

I hope this article will help you in customizing the spinner in your project

References and Good Read

Flawless iOS

🍏 Community around iOS development, mobile design, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store