Disable login form while loading

frontend/src/app/[id]/loading.tsx

@@ -0,0 +1,17 @@
+import EventAvailabilities from '/src/app/[id]/EventAvailabilities'
+import Content from '/src/components/Content/Content'
+
+import styles from './page.module.scss'
+
+const Loading = async () => <>
+  <Content>
+    <h1 className={styles.name}><span className={styles.bone} /></h1>
+    <div className={styles.date}><span className={styles.bone} /></div>
+    <div className={styles.info}><span className={styles.bone} style={{ width: '20em' }} /></div>
+    <div className={styles.info}><span className={styles.bone} style={{ width: '20em' }} /></div>
+  </Content>
+
+  <EventAvailabilities />
+</>
+
+export default Loading

frontend/src/app/[id]/page.tsx

@@ -6,7 +6,7 @@ import { Temporal } from '@js-temporal/polyfill'
 
 import Content from '/src/components/Content/Content'
 import Copyable from '/src/components/Copyable/Copyable'
-import { EventResponse, getEvent } from '/src/config/api'
+import { getEvent } from '/src/config/api'
 import { useTranslation } from '/src/i18n/server'
 import { makeClass, relativeTimeFormat } from '/src/utils'
 
@@ -27,7 +27,10 @@ export const generateMetadata = async ({ params }: PageProps): Promise<Metadata>
 }
 
 const Page = async ({ params }: PageProps) => {
-  const event = getEvent(params.id)
+  const event = await getEvent(params.id).catch(() => undefined)
+  if (!event) notFound()
+
+  const { t, i18n } = await useTranslation(['common', 'event'])
 
   return <>
     <Suspense
@@ -38,33 +41,24 @@ const Page = async ({ params }: PageProps) => {
         <div className={styles.info}><span className={styles.bone} style={{ width: '20em' }} /></div>
       </Content>}
     >
-      <EventMeta event={event} />
+    <Content>
+      <h1 className={styles.name}>{event.name}</h1>
+      <span
+        className={styles.date}
+        title={Temporal.Instant.fromEpochSeconds(event.created_at).toLocaleString(i18n.language, { dateStyle: 'long' })}
+      >{t('common:created', { date: relativeTimeFormat(Temporal.Instant.fromEpochSeconds(event.created_at), i18n.language) })}</span>
+
+      <Copyable className={styles.info}>
+        {`https://crab.fit/${event.id}`}
+      </Copyable>
+      <p className={makeClass(styles.info, styles.noPrint)}>
+        <Trans i18nKey="event:nav.shareinfo" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t('event:nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('event:nav.email_body')} https://crab.fit/${event.id}`)}`}>_</a>_</Trans>
+      </p>
+    </Content>
     </Suspense>
 
-    <EventAvailabilities event={await event.catch(() => undefined)} />
+    <EventAvailabilities event={event} />
   </>
 }
 
-const EventMeta = async (props: { event: Promise<EventResponse> }) => {
-  const event = await props.event.catch(() => undefined)
-  if (!event) notFound()
-
-  const { t, i18n } = await useTranslation(['common', 'event'])
-
-  return <Content>
-    <h1 className={styles.name}>{event.name}</h1>
-    <span
-      className={styles.date}
-      title={Temporal.Instant.fromEpochSeconds(event.created_at).toLocaleString(i18n.language, { dateStyle: 'long' })}
-    >{t('common:created', { date: relativeTimeFormat(Temporal.Instant.fromEpochSeconds(event.created_at), i18n.language) })}</span>
-
-    <Copyable className={styles.info}>
-      {`https://crab.fit/${event.id}`}
-    </Copyable>
-    <p className={makeClass(styles.info, styles.noPrint)}>
-      <Trans i18nKey="event:nav.shareinfo" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t('event:nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('event:nav.email_body')} https://crab.fit/${event.id}`)}`}>_</a>_</Trans>
-    </p>
-  </Content>
-}
-
 export default Page

frontend/src/components/Login/Login.tsx

@@ -78,6 +78,7 @@ const Login = ({ eventId, user, onChange }: LoginProps) => {
         type="text"
         isInline
         required
+        disabled={!eventId}
         {...register('username')}
       />
 
@@ -85,13 +86,14 @@ const Login = ({ eventId, user, onChange }: LoginProps) => {
         label={t('form.password')}
         type="password"
         isInline
+        disabled={!eventId}
         {...register('password')}
       />
 
       <Button
         type="submit"
         isLoading={isLoading}
-        disabled={isLoading}
+        disabled={isLoading || !eventId}
       >{t('form.button')}</Button>
     </form>
     <Error onClose={() => setError(undefined)}>{error}</Error>