- {eventData ? (
+ {eventData && !loader ? (
-
+
{eventData.title}
) : (
- ""
+
)}
- {eventData ? (
+ {eventData && !loader ? (
-

+
) : (
diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx
index 60d6149..d5812d9 100644
--- a/src/pages/Events.tsx
+++ b/src/pages/Events.tsx
@@ -63,11 +63,11 @@ const Events = () => {
return (
);
})
diff --git a/src/styles/_event-item.scss b/src/styles/_event-item.scss
index 4db42ce..ab37164 100644
--- a/src/styles/_event-item.scss
+++ b/src/styles/_event-item.scss
@@ -64,4 +64,28 @@
display: flex;
flex-direction: column;
gap: 4rem;
+
+ &.skeleton {
+ span,
+ h2,
+ p {
+ height: 2.2rem;
+ width: 100%;
+ padding: 1rem 0;
+ @include shineLoad;
+ }
+
+ h2 {
+ height: 3rem;
+ }
+
+ .eventitem-content {
+ gap: 2rem;
+ }
+
+ .eventitem-img {
+ height: 50rem;
+ @include shineLoad;
+ }
+ }
}
diff --git a/src/types/eventProps.ts b/src/types/eventProps.ts
index 4fc714b..a58f571 100644
--- a/src/types/eventProps.ts
+++ b/src/types/eventProps.ts
@@ -35,11 +35,11 @@ export interface eventProps {
export type eventType = [eventProps, React.Dispatch
];
export interface eventProp {
+ id: number;
image: string;
title: string;
time: string;
date: string;
- content: string;
}
// Used in EventsSection.tsx and its' child component Event.tsx