From d8a3779293c9cd97f2e352681caab9ea65b6fdd5 Mon Sep 17 00:00:00 2001
From: Alexis Sellier <self@cloudhead.io>
Date: Tue, 20 Jul 2021 15:21:25 +0200
Subject: [PATCH] Improve org page loading visuals

---
 src/Address.svelte        | 2 --
 src/Loading.svelte        | 1 +
 src/base/orgs/View.svelte | 9 +++++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/Address.svelte b/src/Address.svelte
index c3437cb89..8fff854da 100644
--- a/src/Address.svelte
+++ b/src/Address.svelte
@@ -47,8 +47,6 @@
     color: var(--color-foreground);
   }
   .loading {
-    margin-left: 1rem;
-    width: 4rem;
     height: 1.5rem;
   }
 </style>
diff --git a/src/Loading.svelte b/src/Loading.svelte
index 87f6afdb4..729f016cf 100644
--- a/src/Loading.svelte
+++ b/src/Loading.svelte
@@ -11,6 +11,7 @@
   .container {
     display: flex;
     align-items: center;
+    justify-content: center;
     height: 100%;
   }
 
diff --git a/src/base/orgs/View.svelte b/src/base/orgs/View.svelte
index 927995df8..89b203acd 100644
--- a/src/base/orgs/View.svelte
+++ b/src/base/orgs/View.svelte
@@ -50,6 +50,7 @@
 <style>
   main {
     padding: 5rem 0;
+    width: 54rem;
   }
   main > header {
     display: flex;
@@ -121,12 +122,16 @@
 </style>
 
 {#await Org.get(address, config)}
-  <Loading fadeIn />
+  <main class="centered">
+    <Loading center />
+  </main>
 {:then org}
   {#if org}
     <main>
       {#await Profile.get(address, config)}
-        <Loading fadeIn />
+        <div class="centered">
+          <Loading center />
+        </div>
       {:then profile}
         <header>
           <div class="avatar">