From ea4751400b1337f5217200539897ece49d25343b Mon Sep 17 00:00:00 2001
From: Natty <natty.sh.git@gmail.com>
Date: Tue, 30 Apr 2024 00:53:28 +0200
Subject: [PATCH] Frontend: Made proxy loading placeholders actually take up
 space

---
 .../src/components/MagNoteResolvingProxy.vue  |  2 ++
 .../global/MagAvatarResolvingProxy.vue        | 29 +++++++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/fe_calckey/frontend/client/src/components/MagNoteResolvingProxy.vue b/fe_calckey/frontend/client/src/components/MagNoteResolvingProxy.vue
index 4c2abce..b5730e6 100644
--- a/fe_calckey/frontend/client/src/components/MagNoteResolvingProxy.vue
+++ b/fe_calckey/frontend/client/src/components/MagNoteResolvingProxy.vue
@@ -52,5 +52,7 @@ watch(
     justify-content: center;
     font-size: 1.2em;
     gap: 0.4em;
+    // Approximate height guess
+    padding: 150px 0;
 }
 </style>
diff --git a/fe_calckey/frontend/client/src/components/global/MagAvatarResolvingProxy.vue b/fe_calckey/frontend/client/src/components/global/MagAvatarResolvingProxy.vue
index 9c48082..ae0a64c 100644
--- a/fe_calckey/frontend/client/src/components/global/MagAvatarResolvingProxy.vue
+++ b/fe_calckey/frontend/client/src/components/global/MagAvatarResolvingProxy.vue
@@ -1,5 +1,11 @@
 <template>
     <MagAvatar v-if="userResolved" :user="userResolved" />
+    <span
+        class="avatar-placeholder"
+        :class="{ square: $store.state.squareAvatars }"
+        v-else
+    >
+    </span>
 </template>
 
 <script lang="ts" setup>
@@ -20,7 +26,7 @@ const props = withDefaults(
         target: null,
         disableLink: false,
         disablePreview: false,
-    },
+    }
 );
 
 const userResolved = ref<packed.PackUserBase | null>(null);
@@ -35,9 +41,26 @@ watch(
         userResolved.value = await os.magApi(
             endpoints.GetUserById,
             {},
-            { user_id: val.id },
+            { user_id: val.id }
         );
     },
-    { immediate: true },
+    { immediate: true }
 );
 </script>
+<style lang="scss" scoped>
+.avatar-placeholder {
+    display: inline-block;
+    background-color: var(--buttonBg);
+    opacity: 0.6;
+
+    border-radius: 100%;
+
+    &.square {
+        border-radius: 20%;
+
+        > .inner {
+            border-radius: 20%;
+        }
+    }
+}
+</style>