mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
This commit is contained in:
Vanja Cosic 2019-02-05 18:25:05 +01:00 committed by Scott Nonnenberg
parent b69e720c81
commit b26f6231d8
4 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
background.html
View file

@ -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>

4
index.html
View file

@ -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>

4
main.js
View file

@ -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,

5
stylesheets/_global.scss
View file

@ -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;