I am currently developing a React-JS application that features a substantial amount of assets, including videos and images, some of which are conditionally rendered based on user interaction, such as hovering or clicking a button. Due to which, the webpage is experiencing significant performance issues.
To enhance the user experience, I am looking for a solution to display a preloader screen with a custom animation upon the user's initial landing on the website. During this preloading phase, I want to load all the assets, ensuring seamless performance when the user interacts with the actual content.
I have observed this approach on several awwward websites, and I am looking for guidance on implementing a native React-JS solution (without TypeScript) or recommendations for a suitable library that can help me implement this functionality. Additionally, I would like to show an accurate progress bar to visually represent the loading status of the assets.
As suggested by a few people and Chat-GPT, I tried placing my preloader screen (along with the progress animation) inside of within index.html and also lazy loading the assets. But eventually realized that these techniques don't work as per my expectations.
Could you please suggest a method or library that aligns with these requirements? Any code snippets or examples illustrating the implementation would be greatly appreciated. Thank you!