From 94bc6d75444cb78c7e3fbc5bb031fc4fe613af8b Mon Sep 17 00:00:00 2001
From: Alexis Sellier <self@cloudhead.io>
Date: Wed, 9 Feb 2022 13:54:26 +0100
Subject: [PATCH] Fix padding in members

Signed-off-by: Alexis Sellier <self@cloudhead.io>
---
 src/Profile.svelte | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/Profile.svelte b/src/Profile.svelte
index 5ad82ee84..1b5502287 100644
--- a/src/Profile.svelte
+++ b/src/Profile.svelte
@@ -133,15 +133,18 @@
   }
   .members {
     margin-top: 2rem;
-    padding-bottom: 1rem;
     align-items: center;
     display: flex;
     flex-wrap: wrap;
   }
+  .members.loading {
+    padding-bottom: 1rem;
+  }
   .members .member {
     display: flex;
     align-items: center;
     margin-right: 2rem;
+    margin-bottom: 1rem;
   }
   .members .member:last-child {
     margin-right: 0;
@@ -319,11 +322,13 @@
         <Loading center />
       {:then members}
         {#if members.length > 0}
-          <div class="members">
             <!-- We don't need to catch errors here, since it's not defined by user input and defaults to ETH addresses -->
-            {#await Profile.getMulti(members, config)}
+          {#await Profile.getMulti(members, config)}
+            <div class="members loading">
               <Loading small />
-            {:then members}
+            </div>
+          {:then members}
+            <div class="members">
               {#each members as profile}
                 <div class="member">
                   <div class="member-icon">
@@ -337,8 +342,8 @@
                   </div>
                 </div>
               {/each}
-            {/await}
-          </div>
+            </div>
+          {/await}
         {/if}
       {:catch err}
         <Message error>