feature: a visitor who is not signed in no longer downloads the signed-in toast, voice and lobby code (#873)

Author: lukepolo

layouts/components/TopNav.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { defineAsyncComponent } from "vue";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -21,7 +22,6 @@ import PlayerDisplay from "~/components/PlayerDisplay.vue";
 import PlayerPendingImports from "~/components/PlayerPendingImports.vue";
 import { useAuthStore } from "~/stores/AuthStore";
 import Logout from "./Logout.vue";
-import MatchLobbies from "./MatchLobbies.vue";
 import DraftRoomNav from "./DraftRoomNav.vue";
 import SystemStatus from "./SystemStatus.vue";
 import { useSidebar } from "~/components/ui/sidebar/utils";
@@ -180,6 +180,11 @@ const loginButtonClasses =
   "group relative inline-flex items-center gap-[0.45rem] rounded-md border border-[hsl(var(--tac-amber)/0.55)] bg-[linear-gradient(180deg,hsl(var(--tac-amber)/0.14)_0%,hsl(var(--tac-amber)/0.06)_100%)] px-[0.8rem] py-[0.45rem] font-sans text-[0.68rem] font-bold uppercase tracking-[0.16em] text-topnav-foreground transition-[background-color,color,transform] duration-150 hover:bg-[linear-gradient(180deg,hsl(var(--tac-amber)/0.28)_0%,hsl(var(--tac-amber)/0.14)_100%)] active:translate-y-px sm:px-3 sm:py-[0.35rem] sm:text-[0.65rem] sm:tracking-[0.18em]";
 const loginArrowClasses =
   "font-sans text-[hsl(var(--tac-amber))] transition-transform duration-150 group-hover:translate-x-[3px]";
+
+// Signed-in only (it sits under `v-if="me"`), and it carries the lobby, quick
+// queue and player-search UI with it: a visitor who is not signed in never
+// downloads any of that.
+const MatchLobbies = defineAsyncComponent(() => import("./MatchLobbies.vue"));
 </script>
 
 <template>

layouts/default.vue

@@ -83,6 +83,13 @@ useChatBlocks();
 const route = useRoute();
 const authStore = useAuthStore();
 
+// TopNav loads MatchLobbies lazily, and the root Suspense holds the pre-loader
+// until it arrives. Asking for it here, while TopNav's own chunk is still on
+// its way, keeps a signed-in boot from paying for the two one after the other.
+if (authStore.me) {
+  void import("~/layouts/components/MatchLobbies.vue");
+}
+
 const showLeftNav = computed(() => {
   return authStore.isRoleAbove(e_player_roles_enum.match_organizer);
 });
@@ -184,7 +191,7 @@ provide("containContent", containContent);
 
   <EnablePushPrompt v-if="authStore.me" />
 
-  <ActionToasts />
+  <ActionToasts v-if="authStore.me" />
 </template>
 
 <script lang="ts">