feat: avoid navigation sidebar layout shifts while loading

components/nav/NavSideItem.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   text?: string
   icon: string
   to: string | Record<string, string>
-}>()
+  userOnly?: boolean
+}>(), {
+  userOnly: false,
+})
 
 defineSlots<{
   icon: {}
@@ -22,10 +25,26 @@ useCommand({
     router.push(props.to)
   },
 })
+
+let activeClass = $ref('text-primary')
+watch(isMastoInitialised, async () => {
+  if (!props.userOnly) {
+    // TODO: force NuxtLink to reevaluate, we now we are in this route though, so we should force it to active
+    // we don't have currentServer defined until later
+    activeClass = ''
+    await nextTick()
+    activeClass = 'text-primary'
+  }
+})
+
+// Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items
+// when we know there is no user.
+const noUserDisable = computed(() => !isMastoInitialised.value || (props.userOnly && !currentUser.value))
+const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly && !currentUser.value)
 </script>
 
 <template>
-  <NuxtLink :to="to" :active-class="isMastoInitialised ? 'text-primary' : ''" group focus:outline-none @click="$scrollToTop">
+  <NuxtLink :to="to" :disabled="noUserDisable" :class="noUserVisual ? 'op25 pointer-events-none ' : ''" :active-class="activeClass" group focus:outline-none @click="$scrollToTop">
     <CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
       <div flex w-fit px2 mx3 lg:mx0 lg:px5 py2 gap4 items-center transition-100 rounded-full group-hover:bg-active group-focus-visible:ring="2 current">
         <slot name="icon">