Skip to main content

Lab 21 b: Splash Screen

This lab is optional and should only be done if time permits

Objectives

Display a splash screen while the application code is downloading

Steps

Add a splash screen and the associated styles.

Copy logo-splash-screen.svg into keeptrack\public\assets

public\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <style>
+      html,
+      body,
+      #root,
+      .container,
+      .center-page {
+        height: 100%;
+      }
+
+      .center-page {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .loading {
+        background-color: #dddddd;
+      }
+    </style>
    <title>React App</title>
  </head>
...

public\index.html

...
    <div id="root">
+      <div class="center-page loading">
+        <img src="/assets/logo-splash-screen.svg" alt="logo" />
+      </div>
    </div>
...

Refresh the app from the root (localhost:3000).
- Open Chrome DevTools > Network Tab > in the dropdown at the top change Online to Fast 3g to see the splash screen more easily.

The splash-screen svg is a logo with animation to fade in and out to produce an effect like Gmail when the app first loads.

Objectives
Steps