I'm loading two JS files into a WKWebView via loadHTMLstring method. The scripts are embedded in the application so no HTTP call is being executed. The first script is loaded in the head tag. The second is inline. This is for Lottie web player: https://github.com/LottieFiles/lottie-player. So, the first one loads lottie-player.js whereas the second one loads an animation after the lottie-player element.
The second script does something similar to:
const player = document.querySelector("lottie-player");
// or load via a Bodymovin JSON string/object
player.load(
'{"v":"5.3.4","fr":30,"ip":0,"op":38,"w":315,"h":600,"nm":"new", ... }'
);
Everything works fine (i.e. the animation loads and plays). The problem I'm facing is it takes about 1 second before the animation becomes visible, so WKWebView doesn't seem to load the scripts immediately. Is there a way to fix this issue? I'm using a default WKWebViewConfiguration.
WKWebView initialization and first load are slow. It is better you initialize and load WKWebView before the view controller containing your WKWebView is loaded. You can use below project to check how they have achieved this for your reference and also they have done comparison of time taken to load.
https://github.com/bernikovich/WebViewWarmUper
Also hope that loading an animation is not taking much time.