small update to ProfileUsers, make it so buttons don't load if user doesn't

srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplayOneUser.svelte

@@ -42,3 +42,11 @@
 
 </div>
 
+<style>
+  h2 {
+    text-align: center;
+  }
+  div {
+    text-align: center;
+  }
+</style>

srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte

@@ -16,6 +16,7 @@
   /**** Layout variables ****/
   let tabItems: string[] = ['All Users', 'My Friends', 'Friend Requests', 'Blocked Users']
   let activeTabItem: string = 'All Users';
+  let loadedUser;
 
 
   onMount( async() => {
@@ -295,8 +296,9 @@
 
   <div class="main-display">
     {#if usernameBeingViewed !== undefined}
-      <DisplayAUser aUsername={usernameBeingViewed}/>
+      <DisplayAUser aUsername={usernameBeingViewed} bind:loaded={loadedUser}/>
 
+      {#if loadedUser === true}
       <div class="buttons-area">
         {#if friendshipStatusFull && friendshipStatusFull.id}
           {#if friendshipStatusFull.status === 'R'}
@@ -329,6 +331,7 @@
           <Button on:click={() => blockANonFriendUser(usernameBeingViewed)}>Block User</Button>
         {/if}
       </div>
+      {/if}
     {:else}
       <div class="placeholder">
         <h1>Click on a user!</h1>

srcs/requirements/svelte/api_front/src/pieces/DisplayAUser.svelte

@@ -4,6 +4,7 @@
   import GenerateUserDisplay from './GenerateUserDisplay.svelte';
 
   export let aUsername;
+  export let loaded = false;
   let user;
 
   onMount( async() => {
@@ -20,6 +21,13 @@
 
   $: aUsername, updateUser();
 
+  $: {
+    if (user === undefined)
+      loaded = false;
+    else 
+      loaded = true;
+  }
+
 </script>
 
 <div class="background-pages">
@@ -30,3 +38,13 @@
   <div>Failed to load user {aUsername}</div>
 {/if}
 </div>
+
+
+<style>
+  h2 {
+    text-align: center;
+  }
+  div {
+    text-align: center;
+  }
+</style>