feat: show loading animation on project screen

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

ui/App/LoadingScreen.svelte

@@ -6,7 +6,7 @@
  LICENSE file.
 -->
 <script lang="ts">
-  import EmptyState from "ui/App/ScreenLayout/EmptyState.svelte";
+  import { Loading } from "ui/DesignSystem";
 </script>
 
 <style>
@@ -21,5 +21,5 @@
 </style>
 
 <div class="container">
-  <EmptyState headerText="Loading…" emoji="🕵️" />
+  <Loading />
 </div>

ui/App/OnboardingModal/EnterName.svelte

@@ -99,7 +99,7 @@
   <div>
     <h1>
       Hey
-      <Emoji emoji="👋 " size="big" style="display: inline;" />
+      <Emoji emoji="👋 " size="large" style="display: inline;" />
       what should we call you?
     </h1>
     <p>

ui/App/ProjectScreen/Source.svelte

@@ -30,7 +30,7 @@
   import * as screen from "ui/src/screen";
   import * as wallet from "ui/src/wallet";
 
-  import { Icon } from "ui/DesignSystem";
+  import { Icon, Loading } from "ui/DesignSystem";
 
   import ActionBar from "ui/App/ScreenLayout/ActionBar.svelte";
   import TabBar from "ui/App/ScreenLayout/TabBar.svelte";
@@ -186,6 +186,15 @@
   }
 </script>
 
+<style>
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: calc(100vh - var(--bigheader-height));
+  }
+</style>
+
 {#if $store.status === remote.Status.Success}
   <ActionBar>
     <div slot="left">
@@ -239,4 +248,8 @@
   {:else}
     {unreachable(activeView)}
   {/if}
+{:else if $store.status === remote.Status.Loading}
+  <div class="loading-container">
+    <Loading />
+  </div>
 {/if}

ui/DesignSystem/Emoji.svelte

@@ -10,7 +10,7 @@
 
   export let emoji: string;
 
-  type EmojiSize = "small" | "regular" | "medium" | "big" | "huge";
+  type EmojiSize = "small" | "regular" | "large" | "huge";
   export let size: EmojiSize = "regular";
 
   export let style: string | undefined = undefined;
@@ -33,14 +33,9 @@
     width: 1rem;
   }
 
-  :global(.emoji.medium) {
-    height: 1.125rem;
-    width: 1.125rem;
-  }
-
-  :global(.emoji.big) {
-    height: 2.25rem;
-    width: 2.25rem;
+  :global(.emoji.large) {
+    height: 2rem;
+    width: 2rem;
   }
 
   :global(.emoji.huge) {

ui/DesignSystem/Loading.svelte

@@ -0,0 +1,35 @@
+<!--
+ Copyright © 2021 The Radicle Upstream Contributors
+
+ This file is part of radicle-upstream, distributed under the GPLv3
+ with Radicle Linking Exception. For full terms see the included
+ LICENSE file.
+-->
+<script lang="typescript">
+  import Emoji from "./Emoji.svelte";
+</script>
+
+<style>
+  .animation {
+    animation: rotate, rotate-back;
+    animation-iteration-count: infinite;
+    animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1);
+    animation-duration: 1400ms;
+  }
+  @keyframes rotate {
+    0%,
+    15%,
+    85%,
+    100% {
+      transform: rotate(0deg);
+    }
+    35%,
+    65% {
+      transform: rotate(180deg);
+    }
+  }
+</style>
+
+<div class="animation">
+  <Emoji emoji="⏳" size="large" />
+</div>

ui/DesignSystem/index.ts

@@ -19,6 +19,7 @@ import Icon from "./Icon";
 import IdentifierLink from "./IdentifierLink.svelte";
 import KeyHint from "./KeyHint.svelte";
 import List from "./List.svelte";
+import Loading from "./Loading.svelte";
 import Markdown from "./Markdown.svelte";
 import Notification from "./Notification.svelte";
 import Overlay from "./Overlay.svelte";
@@ -51,6 +52,7 @@ export {
   IdentifierLink,
   KeyHint,
   List,
+  Loading,
   Markdown,
   Notification,
   Overlay,