- 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.
Note: You can also download the Lottie file from the community site and host it on your platform just to be on safer side but for this tutorial I will be using Lottie URL
- Create a Remote Config parameter for your project in this case I named it as lottie_loader_url and add the Lottie URL and save it.
Note: We will also keep on default fail safe loader inside the project just in case if download fails or downloading is in progress from Lottie so the default one works till that time.
- 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
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.
- Now here is the catch, Inside the Lottie iOS framework they use
LRUAnimationCachewhich store the animation file only for that particular app session, If you kill the app it download again.
- When you deep dive
LRUAnimationCachecode you will see it implements
AnimationCacheProviderwhich is custom protocol and inside it
LRUAnimationCachehas implemented the all the logic to store the animation file.
LRUAnimationCachewill not work for our use case, We will create our own custom
AnimationCacheProvider, Below I have shared the gist of
LottieAnimationCachefor your reference.
- You will see we have used our custom UserDefaults wrapper inside it to store our Lottie JSON Loader for our app.
- Now you can create the Loader View with our own cache implementation like below
- Now we have setup the core module let’s play with it
- We will first create the Lottie
AnimationViewwhich 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
- I have written custom method which return
AnimationView. This method take care of fail safe condition also which we discussed earlier
Following are steps we will follow as shown in above screenshot
- We will first create
AnimationViewinstance and load it with default fail safe loader.
- We will first download the Lottie URL from Remote Config.
- We will check if it URL is cache or not
- 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
UserDefaultsand return the default fail safe loader until our loader gets downloaded
- If the URL is cached we will load the
AnimationViewwith our Lottie URL and return our Lottie from Remote Config
- Now with just few line of code we can loader in any part of our app, I have created extension over
UIViewto add it for following example.
7. That’s it, We have successfully created our custom Dynamic Loader which we can update anytime over the air without an app update.
Thank you for reading
I hope this article will help you in customizing the spinner in your project