Making dynamic content in app is always tricky. Even with SwiftUI you might work with a large switch to drop the correct control in View. But if it’s user related or needs to be changed dynamically - we need to get it from backend somehow.
The common approach is to load dynamic webpage with all images, fonts, texts related to user or current state of the app. Calling our API to retrieve the latest URLs and displaying them. Seems like an easy win-win situation.
Let’s show the activity indicator until page is loaded with navigation tracking from WKNavigationDelegate.
This method will tell us that navigation is finished. He doesn’t know anything about actual rendering and resources loading of a page. We will add a small JS script - isContentFullyRendered which will trigger renderingFinished event. What is does?
It checks that images and fonts are loaded and to detect more accurate it must be called on specific events of a webpage.
document.addEventListener('DOMContentLoaded', isContentFullyRendered);
window.addEventListener('load', isContentFullyRendered);
document.fonts.addEventListener('loadingdone', isContentFullyRendered);
Whole code will look like this:
And all that is left is to listen to it:
Full code available here: Gist. Thanks for reading!