From b26f6231d8dcfa4c7a8c589574389255c6cba1d5 Mon Sep 17 00:00:00 2001 From: Vanja Cosic Date: Tue, 5 Feb 2019 18:25:05 +0100 Subject: [PATCH] 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 --- background.html | 4 ++-- index.html | 4 ++-- main.js | 4 ++++ stylesheets/_global.scss | 5 +++-- 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/background.html b/background.html index 0314dde5d..c4df972c2 100644 --- a/background.html +++ b/background.html @@ -29,7 +29,7 @@ diff --git a/main.js b/main.js index f8e16c4c4..775e160be 100644 --- 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, diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 4d348bd70..f21fe0559 100644 --- 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;