Merge pull request #5142 from webkom/improve-event-page-skeleton

webkom · Nov 6, 2024 · 84f5f57 · 84f5f57
2 parents a7380f6 + 5cd5aa8
commit 84f5f57
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/app/routes/events/components/EventDetail/AttendeeSection.tsx b/app/routes/events/components/EventDetail/AttendeeSection.tsx
@@ -63,7 +63,7 @@ export const AttendeeSection = ({
         minUserGridRows={minUserGridRows}
         maxUserGridRows={MAX_USER_GRID_ROWS}
         legacyRegistrationCount={event?.legacyRegistrationCount}
-        skeleton={fetching && !registrations}
+        skeleton={fetching && !registrations.length}
       />
 
       {loggedIn &&

diff --git a/app/routes/events/components/EventDetail/SidebarInfo.tsx b/app/routes/events/components/EventDetail/SidebarInfo.tsx
@@ -29,9 +29,13 @@ export const SidebarInfo = ({ event }: Props) => {
           iconNode={<BriefcaseBusiness />}
           size={20}
           content={
-            <Link to={`/companies/${event.company.id}`}>
-              {event.company.name}
-            </Link>
+            event.company.name ? (
+              <Link to={`/companies/${event.company.id}`}>
+                {event.company.name}
+              </Link>
+            ) : (
+              <Skeleton className={styles.sidebarInfo} width={100} />
+            )
           }
           className={styles.sidebarInfo}
         />
@@ -57,7 +61,13 @@ export const SidebarInfo = ({ event }: Props) => {
         <TextWithIcon
           iconNode={<Coins />}
           size={20}
-          content={event.priceMember / 100 + ',-'}
+          content={
+            event.priceMember ? (
+              event.priceMember / 100 + ',-'
+            ) : (
+              <Skeleton className={styles.sidebarInfo} width={50} />
+            )
+          }
           className={styles.sidebarInfo}
         />
       )}

diff --git a/app/routes/events/components/EventDetail/index.tsx b/app/routes/events/components/EventDetail/index.tsx
@@ -272,7 +272,7 @@ const EventDetail = () => {
 
           <Line />
 
-          {showSkeleton ? (
+          {fetching && !event?.createdBy && !event?.responsibleUsers ? (
             <Flex column gap="var(--spacing-sm)">
               <Flex gap="var(--spacing-md)" className={styles.sidebarInfo}>
                 Arrangør

diff --git a/app/routes/events/components/JoinEventForm.tsx b/app/routes/events/components/JoinEventForm.tsx
@@ -6,6 +6,7 @@ import {
   Icon,
   LoadingIndicator,
   ProgressBar,
+  Skeleton,
 } from '@webkom/lego-bricks';
 import { sumBy } from 'lodash';
 import { CircleHelp, UserMinus } from 'lucide-react';
@@ -330,6 +331,8 @@ const JoinEventForm = ({
           registrationMessage(event)
         ) : (
           <>
+            {!event?.activationTime && <Skeleton array={2} height={35} />}
+
             {!formOpen && event.activationTime && (
               <div>
                 Åpner om{' '}