Animate splash screen

config/webpack/webpack.common.js

@@ -1,11 +1,11 @@
 const path = require('path');
+const fs = require('fs');
 const {IgnorePlugin, DefinePlugin, ProvidePlugin, EnvironmentPlugin} = require('webpack');
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const dotenv = require('dotenv');
 const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
-const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
 const FontPreloadPlugin = require('webpack-font-preload-plugin');
 const CustomVersionFilePlugin = require('./CustomVersionFilePlugin');
 
@@ -52,7 +52,6 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
     devtool: 'source-map',
     entry: {
         main: ['babel-polyfill', './index.js'],
-        splash: ['./web/splash/splash.js'],
     },
     output: {
         filename: '[name]-[contenthash].bundle.js',
@@ -73,11 +72,9 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
         new HtmlWebpackPlugin({
             template: 'web/index.html',
             filename: 'index.html',
+            splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvToLogoSuffix(envFile)}.svg`), 'utf-8'),
             usePolyfillIO: platform === 'web',
         }),
-        new HtmlInlineScriptPlugin({
-            scriptMatchPattern: [/splash.+[.]js$/],
-        }),
         new FontPreloadPlugin({
             extensions: ['woff2'],
         }),
@@ -173,18 +170,6 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                     },
                 ],
             },
-            {
-                test: /splash.css$/i,
-                use: [
-                    {
-                        loader: 'style-loader',
-                        options: {
-                            insert: 'head',
-                            injectType: 'singletonStyleTag',
-                        },
-                    },
-                ],
-            },
             {
                 test: /\.css$/i,
                 use: ['style-loader', 'css-loader'],
@@ -201,7 +186,6 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
     },
     resolve: {
         alias: {
-            logo$: path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvToLogoSuffix(envFile)}.svg`),
             'react-native-config': 'react-web-config',
             'react-native$': '@expensify/react-native-web',
             'react-native-web': '@expensify/react-native-web',

package.json

@@ -189,7 +189,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.5.13",
     "flipper-plugin-bridgespy-client": "^0.1.9",
-    "html-inline-script-webpack-plugin": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "29.4.1",
     "jest-circus": "29.4.1",

src/libs/BootSplash/index.js

@@ -1,5 +1,42 @@
+import Log from '../Log';
+
+let areFontsReady = false;
+document.fonts.ready.then(() => {
+    areFontsReady = true;
+});
+
+function hide() {
+    Log.info('[BootSplash] hiding splash screen', false);
+
+    return new Promise((resolve) => {
+        const minMilisecondsToWait = 1.5 * 1000;
+        let passedMiliseconds = 0;
+        let isRootMounted = false;
+        const root = document.getElementById('root');
+        const splash = document.getElementById('splash');
+
+        const intervalId = setInterval(() => {
+            passedMiliseconds += 250;
+            isRootMounted = root.children.length > 0;
+            if (passedMiliseconds >= minMilisecondsToWait && isRootMounted && areFontsReady) {
+                clearInterval(intervalId);
+                splash.style.opacity = 0;
+
+                setTimeout(() => {
+                    splash.parentNode.removeChild(splash);
+                    resolve();
+                }, 250);
+            }
+        }, 250);
+    });
+}
+
+function getVisibilityStatus() {
+    return document.getElementById('splash') ? 'visible' : 'hidden';
+}
+
 export default {
-    hide: () => Promise.resolve(),
-    getVisibilityStatus: () => Promise.resolve('hidden'),
+    hide,
+    getVisibilityStatus,
     navigationBarHeight: 0,
 };

web/index.html

@@ -78,6 +78,36 @@
             -webkit-text-fill-color: #ffffff;
             caret-color: #ffffff;
         }
+
+        @media screen and (min-width: 480px) { 
+            .splash-logo > svg { 
+                width: 104px; 
+                height: 104px; 
+            }
+        }
+
+        @media screen and (max-width: 479px) { 
+            .splash-logo > svg { 
+                width: 52px; 
+                height: 52px; 
+            }
+        }
+
+        #splash {
+            position: absolute; 
+            bottom: 0;
+            left: 0;
+            right: 0;
+            top: 0;
+            background-color: #061B09; 
+            width: 100%; 
+            height: 100%; 
+            display: flex; 
+            justify-content: center; 
+            align-items: center;
+            transition-duration: 250ms;
+            transition-property: opacity;
+        }
     </style>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, interactive-widget=resizes-content">
     <link rel="shortcut icon" id="favicon" href="/favicon.png">
@@ -90,7 +120,9 @@
     <div style="position: absolute; top: 0; left: 0; right: 0; height: 30px;" id="drag-area"></div>
     <div id="root"></div>
     <div id="splash">
-        <div class="splash-logo"></div>
+        <div class="splash-logo">
+            <%= htmlWebpackPlugin.options.splashLogo %>
+        </div>
     </div>
 </body>
 </html>