Skip to content

Commit

Permalink
Display "days ago" in loading screen
Browse files Browse the repository at this point in the history
  • Loading branch information
indutny-signal committed Mar 28, 2023
1 parent c02c8d9 commit 3264c3d
Show file tree
Hide file tree
Showing 17 changed files with 316 additions and 66 deletions.
5 changes: 5 additions & 0 deletions .storybook/preview-head.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@
// eslint-disable-next-line
const noop = () => {};

window.Whisper = window.Whisper || {};
window.Whisper.events = {
on: noop,
};

window.SignalWindow = window.SignalWindow || {};
window.SignalWindow.log = {
fatal: console.error.bind(console),
Expand Down
2 changes: 2 additions & 0 deletions .storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,10 @@ const withModeAndThemeProvider = (Story, context) => {
// Adding it to the body as well so that we can cover modals and other
// components that are rendered outside of this decorator container
if (theme === 'light') {
document.body.classList.add('light-theme');
document.body.classList.remove('dark-theme');
} else {
document.body.classList.remove('light-theme');
document.body.classList.add('dark-theme');
}

Expand Down
4 changes: 4 additions & 0 deletions _locales/en/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -397,6 +397,10 @@
},
"loadingMessages": {
"message": "Loading messages. $count$ so far...",
"description": "(deleted 03/25/2023) Message shown on the loading screen when we're catching up on the backlog of messages"
},
"icu:loadingMessages": {
"messageformat": "Loading messages from {daysAgo, plural, one {1 day} other {# days}} ago...",
"description": "Message shown on the loading screen when we're catching up on the backlog of messages"
},
"view": {
Expand Down
2 changes: 1 addition & 1 deletion app/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1821,7 +1821,7 @@ app.on('ready', async () => {
loadingWindow = new BrowserWindow({
show: false,
width: 300,
height: 265,
height: 280,
resizable: false,
frame: false,
backgroundColor,
Expand Down
12 changes: 4 additions & 8 deletions background.html
Original file line number Diff line number Diff line change
Expand Up @@ -100,15 +100,11 @@
<div class="app-loading-screen app-loading-screen--without-titlebar">
<div class="module-title-bar-drag-area"></div>

<div class="content">
<div class="module-splash-screen__logo module-img--150"></div>
<div class="container">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="message">&nbsp;</div>
<div class="module-splash-screen__logo module-img--150"></div>
<div class="app-loading-screen__progress--container">
<div class="app-loading-screen__progress--bar"></div>
</div>
<div class="message">&nbsp;</div>
</div>
</div>

Expand Down
14 changes: 6 additions & 8 deletions loading.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,13 @@
</head>
<body>
<div class="app-migration-screen app-loading-screen">
<div class="content">
<div class="module-splash-screen__logo module-img--150"></div>
<div class="container">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div id="message"></div>
<div class="module-splash-screen__logo module-img--150"></div>
<div class="container">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div id="message"></div>
</div>
<script type="text/javascript" src="ts/windows/loading/start.js"></script>
</body>
Expand Down
76 changes: 47 additions & 29 deletions stylesheets/_global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ $loading-height: 16px;
opacity: 1;
}
100% {
opacity: 0;
opacity: 0.3;
}
}

Expand All @@ -224,6 +224,7 @@ $loading-height: 16px;
right: 0;
top: 0;
bottom: 0;
padding: 0 16px;

&--without-titlebar {
/* There is no titlebar during loading screen on Windows */
Expand All @@ -242,41 +243,58 @@ $loading-height: 16px;
color: $color-white;
display: flex;
flex-direction: column;
align-items: stretch;
align-items: center;
justify-content: center;
user-select: none;

.content {
text-align: center;
}
/* Currently only used in loading window */
.container {
margin-left: auto;
margin-right: auto;
width: 78px;
height: 22px;
display: flex;
gap: 7px;
margin: 8px 0 24px 0;

.dot {
width: 14px;
height: 14px;
border: 3px solid $color-white;
border-radius: 50%;
float: left;
margin: 0 6px;
transform: scale(0);

animation: loading 1500ms ease infinite 0ms;
&:nth-child(2) {
animation: loading 1500ms ease infinite 333ms;
}
&:nth-child(3) {
animation: loading 1500ms ease infinite 666ms;
}
}
}

&__progress {
&--container {
background: $color-white-alpha-20;
border-radius: 2px;
height: 4px;
max-width: 400px;
overflow: hidden;
width: 100%;
margin: 16px 0 24px 0;
}

&--bar {
background: $color-white;
border-radius: 2px;
display: block;
height: 100%;
width: 100%;
transform: translateX(-100%);
transition: transform 500ms ease-out;
}
}
.message {
max-width: 35em;
margin-left: auto;
margin-right: auto;
}

.dot {
width: 14px;
height: 14px;
border: 3px solid $color-white;
border-radius: 50%;
float: left;
margin: 0 6px;
transform: scale(0);

animation: loading 1500ms ease infinite 0ms;
&:nth-child(2) {
animation: loading 1500ms ease infinite 333ms;
}
&:nth-child(3) {
animation: loading 1500ms ease infinite 666ms;
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion stylesheets/_modules.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@

.module-splash-screen__logo {
@include color-svg('../images/signal-logo.svg', $color-white);
margin: 24px auto;
margin: 24px 0;

&.module-img--256 {
height: 256px;
Expand Down
11 changes: 11 additions & 0 deletions ts/background.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1181,6 +1181,7 @@ export async function startApp(): Promise<void> {
actionCreators.crashReports,
store.dispatch
),
inbox: bindActionCreators(actionCreators.inbox, store.dispatch),
emojis: bindActionCreators(actionCreators.emojis, store.dispatch),
expiration: bindActionCreators(actionCreators.expiration, store.dispatch),
globalModals: bindActionCreators(
Expand Down Expand Up @@ -2917,9 +2918,19 @@ export async function startApp(): Promise<void> {
maxSize: Infinity,
});

const throttledSetInboxEnvelopeTimestamp = throttle(
serverTimestamp => {
window.reduxActions.inbox.setInboxEnvelopeTimestamp(serverTimestamp);
},
100,
{ leading: false }
);

async function onEnvelopeReceived({
envelope,
}: EnvelopeEvent): Promise<void> {
throttledSetInboxEnvelopeTimestamp(envelope.serverTimestamp);

const ourUuid = window.textsecure.storage.user.getUuid()?.toString();
if (envelope.sourceUuid && envelope.sourceUuid !== ourUuid) {
const { mergePromises, conversation } =
Expand Down
96 changes: 96 additions & 0 deletions ts/components/Inbox.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import React, { useState, useEffect, useMemo } from 'react';
import type { Meta, Story } from '@storybook/react';
import { noop } from 'lodash';

import { Inbox } from './Inbox';
import type { PropsType } from './Inbox';
import { DAY, SECOND } from '../util/durations';

import { setupI18n } from '../util/setupI18n';
import enMessages from '../../_locales/en/messages.json';

const i18n = setupI18n('en', enMessages);

export default {
title: 'Components/Inbox',
argTypes: {
i18n: {
defaultValue: i18n,
},
hasInitialLoadCompleted: {
defaultValue: false,
},
daysAgo: {
control: 'select',
defaultValue: undefined,
options: [undefined, 1, 2, 3, 7, 14, 21],
},
isCustomizingPreferredReactions: {
defaultValue: false,
},
onConversationClosed: {
action: true,
},
onConversationOpened: {
action: true,
},
scrollToMessage: {
action: true,
},
showConversation: {
action: true,
},
showWhatsNewModal: {
action: true,
},
},
} as Meta;

// eslint-disable-next-line react/function-component-definition
const Template: Story<PropsType & { daysAgo?: number }> = ({
daysAgo,
...args
}) => {
const now = useMemo(() => Date.now(), []);
const [offset, setOffset] = useState(0);

useEffect(() => {
if (daysAgo === undefined) {
setOffset(0);
return noop;
}

const interval = setInterval(() => {
setOffset(prevValue => (prevValue + 1 / 4) % daysAgo);
}, SECOND / 10);

return () => clearInterval(interval);
}, [now, daysAgo]);

const firstEnvelopeTimestamp =
daysAgo === undefined ? undefined : now - daysAgo * DAY;
const envelopeTimestamp =
firstEnvelopeTimestamp === undefined
? undefined
: firstEnvelopeTimestamp + offset * DAY;

return (
<Inbox
{...args}
firstEnvelopeTimestamp={firstEnvelopeTimestamp}
envelopeTimestamp={envelopeTimestamp}
renderConversationView={() => <div />}
renderCustomizingPreferredReactionsModal={() => <div />}
renderLeftPane={() => <div />}
renderMiniPlayer={() => <div />}
/>
);
};

export const Default = Template.bind({});
Default.story = {
name: 'Default',
};

0 comments on commit 3264c3d

Please sign in to comment.