fix: teamaddress loading

frontend/src/email/EmailFormOverlay/TraineeEmailFormOverlay.tsx

+import ErrorMessage from '@/components/ErrorMessage'
+import { NonIdealState, Spinner } from '@blueprintjs/core'
+import { useGetTeamEmailParticipant } from '@inject/graphql/queries/GetTeamEmailParticipant.generated'
 import type { FC } from 'react'
 import EmailFormOverlay from '.'
 
@@ -9,12 +12,43 @@ interface TraineeEmailFormOverlayProps {
 const TraineeEmailFormOverlay: FC<TraineeEmailFormOverlayProps> = ({
   teamId,
   exerciseId,
-}) => (
-  <EmailFormOverlay
-    teamId={teamId}
-    emailForm='trainee'
-    exerciseId={exerciseId}
-  />
-)
+}) => {
+  const { data, loading, error } = useGetTeamEmailParticipant({
+    variables: {
+      teamId,
+    },
+    skip: !teamId,
+  })
+
+  if (loading) {
+    return <Spinner />
+  }
+  if (error) {
+    return (
+      <ErrorMessage>
+        <h1>Error occurred!</h1>
+        <p>{error.message}</p>
+      </ErrorMessage>
+    )
+  }
+  if (!data || !data.teamEmailParticipant) {
+    return (
+      <NonIdealState
+        icon='low-voltage-pole'
+        title='No data'
+        description='Please wait for the data to come in'
+      />
+    )
+  }
+
+  return (
+    <EmailFormOverlay
+      teamId={teamId}
+      emailForm='trainee'
+      exerciseId={exerciseId}
+      teamAddress={data.teamEmailParticipant.address}
+    />
+  )
+}
 
 export default TraineeEmailFormOverlay

frontend/src/email/EmailFormOverlay/index.tsx

@@ -2,7 +2,6 @@ import { Button, Card, Overlay2 } from '@blueprintjs/core'
 import { css } from '@emotion/css'
 import type { EmailThread } from '@inject/graphql/fragments/EmailThread.generated'
 import type { FileInfo } from '@inject/graphql/fragments/FileInfo.generated'
-import { useGetTeamEmailParticipant } from '@inject/graphql/queries/GetTeamEmailParticipant.generated'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import InstructorEmailForm from '../EmailForm/InstructorEmailForm'
@@ -22,11 +21,13 @@ const card = css`
 export const OPEN_COMPOSE_EVENT_TYPE = 'openCompose'
 export const OPEN_REPLY_EVENT_TYPE = 'openReply'
 
-interface EmailFormOverlayProps {
+type EmailFormOverlayProps = {
   teamId: string
-  emailForm: 'trainee' | 'instructor'
   exerciseId: string
-}
+} & (
+  | { emailForm: 'trainee'; teamAddress: string }
+  | { emailForm: 'instructor'; teamAddress?: undefined }
+)
 
 interface ComposeInitialValues {
   content?: string
@@ -43,25 +44,12 @@ interface OpenReplyEventPayload {
 const EmailFormOverlay: FC<EmailFormOverlayProps> = ({
   teamId,
   emailForm,
+  teamAddress,
   exerciseId,
 }) => {
   const [open, setOpen] = useState(false)
   const [emailThread, setEmailThread] = useState<EmailThread | undefined>()
 
-  const { data: teamParticipantData } = useGetTeamEmailParticipant({
-    variables: {
-      teamId,
-    },
-    skip: !teamId,
-  })
-  const [teamAddress, setTeamAddress] = useState<string>(
-    teamParticipantData?.teamEmailParticipant?.address || ''
-  )
-  useEffect(
-    () =>
-      setTeamAddress(teamParticipantData?.teamEmailParticipant?.address || ''),
-    [teamParticipantData?.teamEmailParticipant?.address]
-  )
   const formState = useFormState({
     teamAddress: emailForm === 'trainee' ? teamAddress : undefined,
     inInstructor: emailForm === 'instructor',