diff --git a/keyserver/images/loading_logo.svg b/keyserver/images/loading_logo.svg
new file mode 100644
index 000000000..87b23cfdb
--- /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
index 000000000..cb7e7578a
--- /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
index 000000000..41eb0b888
--- /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
index 57f71db07..b03f9d0d2 100644
--- a/web/root.js
+++ b/web/root.js
@@ -1,51 +1,52 @@
 // @flow
 
 import * as React from 'react';
 import { Provider } from 'react-redux';
 import { Router, Route } from 'react-router';
 import { createStore, applyMiddleware, type Store } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';
 import { persistReducer, persistStore } from 'redux-persist';
 import { PersistGate } from 'redux-persist/integration/react';
 import storage from 'redux-persist/lib/storage';
 import thunk from 'redux-thunk';
 
 import { reduxLoggerMiddleware } from 'lib/utils/action-logger';
 
 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';
 import Socket from './socket.react';
 
 const persistConfig = {
   key: 'root',
   storage,
   whitelist: ['enabledApps', 'deviceID', 'draftStore'],
   version: 0,
 };
 
 declare var preloadedState: AppState;
 const persistedReducer = persistReducer(persistConfig, reducer);
 const store: Store<AppState, Action> = createStore(
   persistedReducer,
   preloadedState,
   composeWithDevTools({})(applyMiddleware(thunk, reduxLoggerMiddleware)),
 );
 const persistor = persistStore(store);
 
 const RootProvider = (): React.Node => (
   <Provider store={store}>
-    <PersistGate persistor={persistor}>
+    <PersistGate persistor={persistor} loading={<Loading />}>
       <ErrorBoundary>
         <Router history={history.getHistoryObject()}>
           <Route path="*" component={App} />
         </Router>
         <Socket />
       </ErrorBoundary>
     </PersistGate>
   </Provider>
 );
 
 export default RootProvider;
diff --git a/web/theme.css b/web/theme.css
index 50f0a0a8f..afeddca5c 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,196 +1,196 @@
 :root {
   /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
 
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-100: #0a0a0a;
   --shades-black-90: #1f1f1f;
   --shades-black-80: #404040;
   --shades-black-70: #666666;
   --shades-black-60: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --logo-bg: #111827;
-
   --spoiler-color: #33332c;
+  --loading-foreground: #1b0e38;
 
   --bg: var(--shades-black-100);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-60);
   --text-input-bg: var(--shades-black-80);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-80);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
   --btn-bg-filled: var(--violet-dark-100);
   --btn-bg-outline: var(--shades-black-90);
   --btn-bg-success: var(--success-dark-50);
   --btn-bg-danger: var(--error-primary);
   --btn-bg-disabled: var(--shades-black-80);
   --btn-disabled-color: var(--shades-black-60);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --thread-hover-bg: var(--shades-black-80);
   --thread-active-bg: var(--shades-black-80);
   --chat-timestamp-color: var(--shades-black-60);
   --tool-tip-bg: var(--shades-black-80);
   --tool-tip-color: var(--shades-white-60);
   --border-color: var(--shades-black-80);
   --calendar-chevron: var(--shades-black-60);
   --calendar-day-bg: var(--shades-black-60);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-90);
   --community-settings-selected: var(--violet-dark-60);
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --modal-bg: var(--shades-black-90);
   --modal-fg: var(--shades-white-60);
   --join-bg: var(--shades-black-90);
   --help-color: var(--shades-black-60);
   --breadcrumb-color: var(--shades-white-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --btn-outline-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-from-color-read: var(--shades-black-80);
   --thread-last-message-color-read: var(--shades-black-60);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-menu-color: var(--shades-white-70);
   --thread-ancestor-keyserver-border: var(--shades-black-70);
   --thread-ancestor-color-light: var(--shades-white-70);
   --thread-ancestor-color-dark: var(--shades-black-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-80);
   --message-action-tooltip-bg: var(--shades-black-90);
   --menu-bg: var(--shades-black-90);
   --menu-bg-light: var(--shades-black-80);
   --menu-separator-color: var(--shades-black-80);
   --menu-color: var(--shades-black-60);
   --menu-color-light: var(--shades-white-60);
   --menu-color-hover: var(--shades-white-100);
   --menu-color-dangerous: var(--error-primary);
   --menu-color-dangerous-hover: var(--error-light-50);
   --app-list-icon-read-only-color: var(--shades-black-60);
   --app-list-icon-enabled-color: var(--success-primary);
   --app-list-icon-disabled-color: var(--shades-white-80);
   --account-settings-label: var(--shades-black-60);
   --account-button-color: var(--violet-dark-100);
   --chat-thread-list-color-active: var(--shades-white-60);
   --chat-thread-list-menu-color: var(--shades-white-60);
   --chat-thread-list-menu-bg: var(--shades-black-80);
   --chat-thread-list-menu-active-color: var(--shades-white-60);
   --chat-thread-list-menu-active-bg: var(--shades-black-90);
   --search-clear-color: var(--shades-white-100);
   --search-clear-bg: var(--shades-black-70);
   --search-input-color: var(--shades-white-100);
   --search-input-placeholder: var(--shades-black-60);
   --search-icon-color: var(--shades-black-60);
   --tabs-header-active-color: var(--shades-white-100);
   --tabs-header-active-border: var(--violet-light-100);
   --tabs-header-background-color: var(--shades-black-60);
   --tabs-header-background-border: var(--shades-black-80);
   --tabs-header-background-color-hover: var(--shades-white-80);
   --tabs-header-background-border-hover: var(--shades-black-70);
   --members-modal-member-text: var(--shades-black-60);
   --members-modal-member-text-hover: var(--shades-white-100);
   --label-default-bg: var(--violet-dark-80);
   --label-default-color: var(--shades-white-80);
   --subchannels-modal-color: var(--shades-black-60);
   --subchannels-modal-color-hover: var(--shades-white-100);
   --color-selector-active-bg: var(--shades-black-80);
   --relationship-modal-color: var(--shades-black-60);
   --arrow-extension-color: var(--shades-black-60);
   --modal-close-color: var(--shades-black-60);
   --modal-close-color-hover: var(--shades-white-100);
   --add-members-group-header-color: var(--shades-black-60);
   --add-members-item-color: var(--shades-black-60);
   --add-members-item-color-hover: var(--shades-white-100);
   --add-members-item-disabled-color: var(--shades-black-80);
   --add-members-item-disabled-color-hover: var(--shades-black-60);
   --add-members-remove-pending-color: var(--error-primary);
   --add-members-remove-pending-color-hover: var(--error-light-50);
   --radio-border: var(--shades-black-70);
   --radio-color: var(--shades-white-60);
   --notification-settings-option-selected-bg: var(--shades-black-80);
   --notification-settings-option-title-color: var(--shades-white-90);
   --notification-settings-option-color: var(--shades-white-60);
   --notification-settings-option-invalid-color: var(--shades-black-80);
   --notification-settings-option-invalid-selected-color: var(--shades-black-60);
   --danger-zone-subheading-color: var(--shades-white-60);
   --danger-zone-explanation-color: var(--shades-black-60);
   --thread-creation-search-container-bg: var(--shades-black-90);
   --thread-creation-close-search-color: var(--shades-black-60);
   --thread-creation-search-item-bg-hover: var(--shades-black-80);
   --thread-creation-search-item-info-color: var(--shades-black-60);
   --chat-message-list-active-border: #5989d6;
   --sidebars-modal-color: var(--shades-black-60);
   --sidebars-modal-color-hover: var(--shades-white-100);
   --inline-sidebar-bg: var(--shades-black-70);
   --inline-sidebar-bg-hover: var(--shades-black-80);
   --inline-sidebar-color: var(--fg);
   --compose-subchannel-header-fg: var(--shades-black-60);
   --compose-subchannel-header-bg: var(--shades-black-80);
   --compose-subchannel-label-color: var(--shades-black-60);
   --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
   --show-password-bg-hover: var(--shades-black-70);
   --typeahead-overlay-light: var(--shades-black-80);
   --typeahead-overlay-dark: var(--shades-black-90);
   --typeahead-overlay-text: var(--shades-white-100);
   --typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25);
   --typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
   --spoiler-text-color: var(--spoiler-color);
   --spoiler-background-color: var(--spoiler-color);
   --purple-link: var(--violet-light-100);
 }