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,20 +41,7 @@ const Page = async ({ params }: PageProps) => {
         <div className={styles.info}><span className={styles.bone} style={{ width: '20em' }} /></div>
       </Content>}
     >
-      <EventMeta event={event} />
-    </Suspense>
-
-    <EventAvailabilities event={await event.catch(() => undefined)} />
-  </>
-}
-
-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>
+    <Content>
       <h1 className={styles.name}>{event.name}</h1>
       <span
         className={styles.date}
@@ -65,6 +55,10 @@ const EventMeta = async (props: { event: Promise<EventResponse> }) => {
         <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={event} />
+  </>
 }
 
 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>