Splash screen in Create-React-App

Question

I'm using create-react-app to design a PWA. The default Splash screen provided by the App is an icon (in middle of the screen) and a name of the app below that icon. Icon & name must be provided in the manifest file.

Question: Is there any way to customize the Splash Screen instead of using the default one?

Following is the possible solution but searching for a better way to do that.

Possible Solution:

1. Add a component for Splash Screen.

2. On the main component, render SplashScreen component untill the API response is returned from the server. I am using renderSplashscreen state for rendering the SplashScreen component.

   // Component for Splash Screen
   class SplashScreen extends React.Component {
     render() {
       const style = {top: 0,
         bottom: 0,
         right: 0,
         left: 0,
         position: 'fixed'};
   
       return (
         <img src={'IMAGE-URL'} style={style}/>
       );
     }
   }
   
   class MainComponent extends React.Component {
     constructor(props) {
       this.state = {
         renderSplashscreen: true
       };
     }
   
     apiCallback(data) {
       // After getting the API response from server
       this.setState({renderSplashscreen: false});
     }
   
     render() {
       let view;
   
       if(this.state.renderSplashscreen)
         return <SplashScreen/>;
       else
         return <OtherComponent/>
     }
   }
   

Answer 1

Here's my own possible solution added in the question, as for now, this is the only solution that works well.

1. Add a component for Splash Screen.

2. On the main component, render SplashScreen component untill the API response is returned from the server. I am using renderSplashscreen state for rendering the SplashScreen component.

   // Component for Splash Screen
   class SplashScreen extends React.Component {
     render() {
       const style = {top: 0,
         bottom: 0,
         right: 0,
         left: 0,
         position: 'fixed'};
   
       return (
         <img src={'IMAGE-URL'} style={style}/>
       );
     }
   }
   
   class MainComponent extends React.Component {
     constructor(props) {
       this.state = {
         renderSplashscreen: true
       };
     }
   
     apiCallback(data) {
       // After getting the API response from server
       this.setState({renderSplashscreen: false});
     }
   
     render() {
       let view;
   
       if(this.state.renderSplashscreen)
         return <SplashScreen/>;
       else
         return <OtherComponent/>
     }
   }