Backmerge main to develop

packages/berlin/src/components/skeleton/Skeleton.tsx

@@ -0,0 +1,8 @@
+import { useAppStore } from '@/store';
+
+export default function Skeleton({ className }: React.HTMLAttributes<HTMLDivElement>) {
+  const theme = useAppStore((state) => state.theme);
+  return (
+    <div className={`${className} animate-pulse ${theme === 'dark' ? 'bg-[#333]' : 'bg-[#eee]'}`} />
+  );
+}

packages/berlin/src/components/skeleton/index.ts

@@ -0,0 +1 @@
+export { default } from './Skeleton';

packages/berlin/src/pages/Event.tsx

@@ -17,10 +17,11 @@ import Cycles from '../components/cycles';
 import Link from '../components/link';
 import Markdown from 'react-markdown';
 import Onboarding from '@/components/onboarding';
+import Skeleton from '@/components/skeleton';
 
 function Event() {
   const { eventId } = useParams();
-  const { data: event } = useQuery({
+  const { data: event, isLoading } = useQuery({
     queryKey: ['event', eventId],
     queryFn: () =>
       fetchEvent({ eventId: eventId || '', serverUrl: import.meta.env.VITE_SERVER_URL }),
@@ -45,10 +46,23 @@ function Event() {
   );
 
   const initialTab = useMemo(
-    () => (openCycles && openCycles.length > 0 ? 'upcoming' : 'past'),
+    () => (openCycles && openCycles.length > 0 ? 'open' : 'closed'),
     [openCycles],
   );
 
+  if (isLoading) {
+    return (
+      <div className="grid w-full grid-cols-3 gap-4">
+        <div className="col-span-3 flex flex-col gap-4 md:col-span-2">
+          <Skeleton className="h-[100px] md:h-[212px]" />
+          <Skeleton className="h-[50px] md:h-[122px]" />
+        </div>
+        <Skeleton className="col-span-3 h-[250px] md:col-span-1 md:h-[350px]" />
+        <Skeleton className="col-span-3 h-[200px]" />
+      </div>
+    );
+  }
+
   return (
     <>
       <Onboarding steps={eventSteps} type="event" />
@@ -103,28 +117,28 @@ function Questions({
 }) {
   const [activeTab, setActiveTab] = useState<string>(initialTab);
 
-  const tabNames = ['upcoming', 'past'];
+  const tabNames = ['open', 'closed'];
 
   const tabs = {
-    upcoming: (
+    open: (
       <Cycles
         cycles={openCycles}
         eventId={eventId}
         fallback={{
-          message: 'No upcoming questions available.',
-          buttonMessage: 'Past questions',
-          buttonOnClick: () => setActiveTab('past'),
+          message: 'No open questions available.',
+          buttonMessage: 'Closed questions',
+          buttonOnClick: () => setActiveTab('closed'),
         }}
       />
     ),
-    past: (
+    closed: (
       <Cycles
         cycles={closedCycles}
         eventId={eventId}
         fallback={{
-          message: 'No past questions available.',
-          buttonMessage: 'Upcoming questions',
-          buttonOnClick: () => setActiveTab('upcoming'),
+          message: 'No closed questions available.',
+          buttonMessage: 'Open questions',
+          buttonOnClick: () => setActiveTab('open'),
         }}
       />
     ),

packages/berlin/src/pages/Register.tsx

@@ -1,9 +1,10 @@
 // React and third-party libraries
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
 import { UseFormReturn, useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useNavigate, useParams } from 'react-router-dom';
+import { z } from 'zod';
+import toast from 'react-hot-toast';
 
 // API
 import {
@@ -23,21 +24,23 @@ import {
   type GetUserResponse,
 } from 'api';
 
+// Utils
+import { dataSchema, fieldsSchema } from '@/utils/form-validation';
+
 // Hooks
 import useUser from '../hooks/useUser';
 
 // Components
-import { dataSchema, fieldsSchema } from '@/utils/form-validation';
-import { z } from 'zod';
-import Button from '../components/button';
 import { Carousel } from '../components/carousel';
 import { FlexColumn } from '../components/containers/FlexColumn.styled';
 import { Form } from '../components/containers/Form.styled';
 import { FormInput, FormSelectInput } from '../components/form-input';
-import Select from '../components/select';
-import Label from '../components/typography/Label';
-import { Subtitle } from '../components/typography/Subtitle.styled';
 import { SafeArea } from '../layout/Layout.styled';
+import { Subtitle } from '../components/typography/Subtitle.styled';
+import Button from '../components/button';
+import Label from '../components/typography/Label';
+import Select from '../components/select';
+import Skeleton from '@/components/skeleton';
 
 function Register() {
   const { user, isLoading } = useUser();
@@ -82,7 +85,7 @@ function Register() {
     }
 
     // if no fields exists then stay on group categories page
-    if (Object.values(fields).length === 0) {
+    if (Object.values(fields.data).length === 0) {
       return 0;
     }
 
@@ -390,8 +393,18 @@ function EventGroupsForm({
     }
   };
 
+  if (!groupCategories) {
+    return (
+      <div className="mt-4 flex w-full flex-col gap-4">
+        <Skeleton className="h-5 w-60" />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-9 w-20" />
+      </div>
+    );
+  }
+
   return (
-    <FlexColumn>
+    <FlexColumn className="mt-4">
       {groupCategories
         ?.filter((groupCategory) => groupCategory.required)
         .map((groupCategory) => (