@Loading on teamquery

schema.graphql

@@ -637,7 +637,7 @@ type Team implements Node {
   apps(after: Cursor, before: Cursor, first: Int, last: Int): AppConnection!
   deployKey: DeploymentKey!
   deployments(after: Cursor, before: Cursor, first: Int, last: Int, limit: Int): DeploymentConnection!
-  description: String
+  description: String!
   githubRepositories(after: Cursor, first: Int): GithubRepositoryConnection!
   id: ID!
   members(after: Cursor, before: Cursor, first: Int, last: Int): TeamMemberConnection!

src/routes/team/[team]/(teamTabs)/+layout.gql

@@ -1,5 +1,5 @@
 query TeamRoles($team: String!) {
-	team(name: $team) {
+	team(name: $team) @loading {
 		viewerIsAdmin
 		viewerIsMember
 	}

src/routes/team/[team]/(teamTabs)/+layout.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import Tabs from '$lib/Tabs.svelte';
+	import { PendingValue } from '$houdini';
+	import Loading from '$lib/Loading.svelte';
 	import Tab from '$lib/Tab.svelte';
+	import Tabs from '$lib/Tabs.svelte';
 	import { replacer } from '$lib/replacer';
 	import type { PageData } from './$houdini';
 
@@ -39,12 +41,16 @@
 	{#each nav as { tab, routeId }}
 		<Tab href={replacer(routeId, { team })} active={currentRoute == routeId} title={tab} />
 	{/each}
-	{#if $TeamRoles.data?.team.viewerIsMember || $TeamRoles.data?.team.viewerIsAdmin}
-		<Tab
-			href={replacer('/team/[team]/(teamTabs)/settings', { team })}
-			active={currentRoute == '/team/[team]/(teamTabs)/settings'}
-			title="Settings"
-		/>
+	{#if $TeamRoles.data}
+		{#if $TeamRoles.data.team === PendingValue}
+			<Loading />
+		{:else if $TeamRoles.data.team.viewerIsMember || $TeamRoles.data.team.viewerIsAdmin}
+			<Tab
+				href={replacer('/team/[team]/(teamTabs)/settings', { team })}
+				active={currentRoute == '/team/[team]/(teamTabs)/settings'}
+				title="Settings"
+			/>
+		{/if}
 	{/if}
 </Tabs>
 <div class="container">