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

Loading screen progressbar improvements

Browse source
This commit is contained in:
Fedor Indutny 2023-03-31 16:10:11 -07:00 • committed by GitHub
commit aba8882d0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

8
background.html
View file

@ -101,10 +101,12 @@
<div class="module-title-bar-drag-area"></div> <div class="module-title-bar-drag-area"></div>
<div class="module-splash-screen__logo module-img--150"></div> <div class="module-splash-screen__logo module-img--150"></div>
<div class="app-loading-screen__progress--container"> <div class="container">
<div class="app-loading-screen__progress--bar"></div> <span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div> </div>
<div class="message">&nbsp;</div> <div class="message-placeholder"></div>
</div> </div>
</div> </div>

22
stylesheets/_global.scss
View file

@ -216,6 +216,15 @@ $loading-height: 16px;
} }
} }
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.app-migration-screen { .app-migration-screen {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -251,11 +260,10 @@ $loading-height: 16px;
justify-content: center; justify-content: center;
user-select: none; user-select: none;
/* Currently only used in loading window */
.container { .container {
display: flex; display: flex;
gap: 7px; gap: 7px;
margin: 8px 0 24px 0; margin: 6px 0 22px 0;
.dot { .dot {
width: 14px; width: 14px;
@ -278,13 +286,15 @@ $loading-height: 16px;
&__progress { &__progress {
&--container { &--container {
animation: fade-in 150ms ease 1 0ms;
background: $color-white-alpha-20; background: $color-white-alpha-20;
border-radius: 2px; border-radius: 2px;
height: 4px; height: 4px;
max-width: 400px; max-width: 400px;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
margin: 16px 0 24px 0; margin: 12px 0 26px 0;
} }
&--bar { &--bar {
@ -294,12 +304,16 @@ $loading-height: 16px;
height: 100%; height: 100%;
width: 100%; width: 100%;
transform: translateX(-100%); transform: translateX(-100%);
transition: transform 500ms ease-out; transition: transform 500ms linear;
} }
} }
.message { .message {
animation: fade-in 150ms ease 1 0ms;
max-width: 35em; max-width: 35em;
} }
.message-placeholder {
height: 20px;
}
} }
.full-screen-flow { .full-screen-flow {

28
ts/components/Inbox.tsx
View file

@ -202,7 +202,7 @@ export function Inbox({
) * 100; ) * 100;
} }
let message = i18n('icu:loading'); let message: string | undefined;
if (envelopeTimestamp !== undefined) { if (envelopeTimestamp !== undefined) {
const daysBeforeMidnight = Math.ceil( const daysBeforeMidnight = Math.ceil(
(midnight - envelopeTimestamp) / DAY (midnight - envelopeTimestamp) / DAY
@ -224,13 +224,25 @@ export function Inbox({
<div className="module-title-bar-drag-area" /> <div className="module-title-bar-drag-area" />
<div className="module-splash-screen__logo module-img--150" /> <div className="module-splash-screen__logo module-img--150" />
<div className="app-loading-screen__progress--container"> {envelopeTimestamp === undefined ? (
<div <div className="container">
className="app-loading-screen__progress--bar" <span className="dot" />
style={{ transform: `translateX(${loadingProgress - 100}%)` }} <span className="dot" />
/> <span className="dot" />
</div> </div>
<div className="message">{message}</div> ) : (
<div className="app-loading-screen__progress--container">
<div
className="app-loading-screen__progress--bar"
style={{ transform: `translateX(${loadingProgress - 100}%)` }}
/>
</div>
)}
{message === undefined ? (
<div className="message-placeholder" />
) : (
<div className="message">{message}</div>
)}
<div id="toast" /> <div id="toast" />
</div> </div>
); );