Frontend: Made proxy loading placeholders actually take up space

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>

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>