Page MenuHomePhabricator
Files F3270970

D5981.id20051.diff
No OneTemporary
Actions

D5981.id20051.diff
View Options

diff --git a/keyserver/images/loading_logo.svg b/keyserver/images/loading_logo.svg
new file mode 100644
--- /dev/null
+++ b/keyserver/images/loading_logo.svg
@@ -0,0 +1,10 @@
+<svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.5283 80C29.3268 80 24.6382 79.1874 20.4624 77.5623C16.2866 75.8633 12.7334 73.3887 9.80303 70.1385C6.87263 66.8144 4.60157 62.7147 2.98985 57.8393C1.37813 52.8901 0.572266 47.1283 0.572266 40.554C0.572266 34.0536 1.37813 28.2918 2.98985 23.2687C4.60157 18.1717 6.87263 13.9243 9.80303 10.5263C12.7334 7.05448 16.2866 4.43213 20.4624 2.65928C24.6382 0.886425 29.3268 0 34.5283 0C41.6345 0 47.4953 1.47738 52.1107 4.43214C56.7261 7.31302 60.4257 11.8929 63.2096 18.1717L48.814 25.7064C47.7884 22.4561 46.1767 19.8707 43.9789 17.9501C41.8543 15.9557 38.7041 14.9584 34.5283 14.9584C29.6199 14.9584 25.6638 16.5836 22.6602 19.8338C19.7298 23.0102 18.2646 27.6639 18.2646 33.795V46.205C18.2646 52.3361 19.7298 57.0268 22.6602 60.277C25.6638 63.4534 29.6199 65.0415 34.5283 65.0415C38.6309 65.0415 41.8909 63.9335 44.3085 61.7174C46.7994 59.4275 48.6309 56.6944 49.803 53.518L63.4294 61.4958C60.5723 67.4053 56.7994 71.9852 52.1107 75.2355C47.4953 78.4118 41.6345 80 34.5283 80Z" fill="white"/>
+<path d="M34.5283 80C29.3268 80 24.6382 79.1874 20.4624 77.5623C16.2866 75.8633 12.7334 73.3887 9.80303 70.1385C6.87263 66.8144 4.60157 62.7147 2.98985 57.8393C1.37813 52.8901 0.572266 47.1283 0.572266 40.554C0.572266 34.0536 1.37813 28.2918 2.98985 23.2687C4.60157 18.1717 6.87263 13.9243 9.80303 10.5263C12.7334 7.05448 16.2866 4.43213 20.4624 2.65928C24.6382 0.886425 29.3268 0 34.5283 0C41.6345 0 47.4953 1.47738 52.1107 4.43214C56.7261 7.31302 60.4257 11.8929 63.2096 18.1717L48.814 25.7064C47.7884 22.4561 46.1767 19.8707 43.9789 17.9501C41.8543 15.9557 38.7041 14.9584 34.5283 14.9584C29.6199 14.9584 25.6638 16.5836 22.6602 19.8338C19.7298 23.0102 18.2646 27.6639 18.2646 33.795V46.205C18.2646 52.3361 19.7298 57.0268 22.6602 60.277C25.6638 63.4534 29.6199 65.0415 34.5283 65.0415C38.6309 65.0415 41.8909 63.9335 44.3085 61.7174C46.7994 59.4275 48.6309 56.6944 49.803 53.518L63.4294 61.4958C60.5723 67.4053 56.7994 71.9852 52.1107 75.2355C47.4953 78.4118 41.6345 80 34.5283 80Z" fill="url(#paint0_linear_6285_104426)"/>
+<defs>
+<linearGradient id="paint0_linear_6285_104426" x1="32.0008" y1="28.5" x2="32.0008" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121727" stop-opacity="0"/>
+<stop offset="1" stop-color="#121727" stop-opacity="0.25"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/web/loading.css b/web/loading.css
new file mode 100644
--- /dev/null
+++ b/web/loading.css
@@ -0,0 +1,71 @@
+div.loadingContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+div.loading {
+ width: 256px;
+ height: 256px;
+ background: linear-gradient(
+ 180deg,
+ #5b3894 -2.54%,
+ #331f5c 42.59%,
+ #22153d 103.12%
+ );
+ box-shadow: 0px 0px 64px #00000040;
+ border-radius: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 16px;
+ box-sizing: border-box;
+}
+div.innerLoading {
+ flex: 1;
+ background-color: var(--loading-foreground);
+ height: 100%;
+ border-radius: 32px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-evenly;
+ padding: 0 24px;
+}
+div.innerLoading > img {
+ height: 92px;
+ padding: 24px;
+}
+
+.loader {
+ border-radius: 8px;
+ width: 100%;
+ height: 12px;
+ display: inline-block;
+ position: relative;
+ background: #ffffff26;
+ overflow: hidden;
+}
+.loader::after {
+ border-radius: 8px;
+ content: '';
+ width: 48px;
+ height: 12px;
+ background: var(--shades-white-100);
+ position: absolute;
+ top: 0;
+ left: 0;
+ box-sizing: border-box;
+ animation: loaderAnimation 1s linear infinite alternate;
+}
+
+@keyframes loaderAnimation {
+ 0% {
+ left: 0;
+ transform: translateX(-50%);
+ }
+ 100% {
+ left: 100%;
+ transform: translateX(-50%);
+ }
+}
diff --git a/web/loading.react.js b/web/loading.react.js
new file mode 100644
--- /dev/null
+++ b/web/loading.react.js
@@ -0,0 +1,20 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './loading.css';
+
+function Loading(): React.Node {
+ return (
+ <div className={css.loadingContainer}>
+ <div className={css.loading}>
+ <div className={css.innerLoading}>
+ <img src="images/loading_logo.svg" alt="Comm logo" />
+ <span className={css.loader} />
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export default Loading;
diff --git a/web/root.js b/web/root.js
--- a/web/root.js
+++ b/web/root.js
@@ -14,6 +14,7 @@
import App from './app.react';
import ErrorBoundary from './error-boundary.react';
+import Loading from './loading.react';
import { reducer } from './redux/redux-setup';
import type { AppState, Action } from './redux/redux-setup';
import history from './router-history';
@@ -37,7 +38,7 @@
const RootProvider = (): React.Node => (
<Provider store={store}>
- <PersistGate persistor={persistor}>
+ <PersistGate persistor={persistor} loading={<Loading />}>
<ErrorBoundary>
<Router history={history.getHistoryObject()}>
<Route path="*" component={App} />
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -50,8 +50,8 @@
--error-dark-90: #4f1203;
--logo-bg: #111827;
-
--spoiler-color: #33332c;
+ --loading-foreground: #1b0e38;
--bg: var(--shades-black-100);
--fg: var(--shades-white-100);

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 17, 4:56 AM (20 h, 52 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2511324
Default Alt Text
D5981.id20051.diff (5 KB)

Event Timeline