Get rid of the white flash when the app starts up (#3083)

* Prevent FOUC on startup, use Signal Blue instead Instead of flashing a white background on startup, the app will show a blue background while everything is loading. * Make sure tests are rendered on white background * Use `icon_250.png` as the loading image * Remove hardcoded 'Loading...' text from template
7 years ago · b26f6231d8
parent b69e720c81
commit b26f6231d8
4 changed files with 11 additions and 6 deletions
--- a/background.html
+++ b/background.html
@ -29,7 +29,7 @@

  <script type='text/x-tmpl-mustache' id='app-loading-screen'>
    <div class='content'>
-      <img src='images/icon_128.png'>
+      <img src='images/icon_250.png' height='150'>
      <div class='container'>
        <span class='dot'></span>
        <span class='dot'></span>
@ -645,7 +645,7 @@
 <body>
  <div class='app-loading-screen'>
    <div class='content'>
-      <img src='images/icon_128.png'>
+      <img src='images/icon_250.png' height='150'>
      <div class='container'>
        <span class='dot'></span>
        <span class='dot'></span>
--- a/index.html
+++ b/index.html
@ -14,13 +14,13 @@
    <body id="signal-container" class='signal index'>
        <div class='app-loading-screen'>
            <div class='content'>
-              <img src='/images/icon_128.png'>
+              <img src='/images/icon_250.png' height='150'>
              <div class='container'>
                <span class='dot'></span>
                <span class='dot'></span>
                <span class='dot'></span>
              </div>
-              <div class='message'>Loading...</div>
+              <div class='message'></div>
            </div>
        </div>
        <script type="text/javascript" src="js/index.js"></script>
--- a/main.js
+++ b/main.js
@ -210,6 +210,10 @@ function createWindow() {
      minWidth: MIN_WIDTH,
      minHeight: MIN_HEIGHT,
      autoHideMenuBar: false,
+      backgroundColor:
+        config.environment === 'test' || config.environment === 'test-lib'
+          ? '#ffffff' // Tests should always be rendered on a white background
+          : '#2090EA',
      webPreferences: {
        nodeIntegration: false,
        nodeIntegrationInWorker: false,
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@ -454,7 +454,8 @@ $loading-height: 16px;
  right: 0;
  top: 0;
  bottom: 0;
-  background-color: white;
+  background-color: $color-signal-blue;
+  color: $color-white;
  display: flex;
  align-items: center;
  user-select: none;
@ -478,7 +479,7 @@ $loading-height: 16px;
  .dot {
    width: 14px;
    height: 14px;
-    border: 3px solid $blue;
+    border: 3px solid $color-white;
    border-radius: 50%;
    float: left;
    margin: 0 6px;