feat: calendar skeleton

apps/frontend/src/components/launches/calendar.context.tsx

@@ -21,6 +21,7 @@ import weekOfYear from 'dayjs/plugin/weekOfYear';
 import { extend } from 'dayjs';
 import useCookie from 'react-use-cookie';
 import { newDayjs } from '@gitroom/frontend/components/layout/set.timezone';
+import { timer } from '@gitroom/helpers/utils/timer';
 extend(isoWeek);
 extend(weekOfYear);
 
@@ -28,6 +29,7 @@ export const CalendarContext = createContext({
   startDate: newDayjs().startOf('isoWeek').format('YYYY-MM-DD'),
   endDate: newDayjs().endOf('isoWeek').format('YYYY-MM-DD'),
   customer: null as string | null,
+  loading: true,
   sets: [] as { name: string; id: string; content: string[] }[],
   signature: undefined as any,
   comments: [] as Array<{
@@ -251,6 +253,7 @@ export const CalendarWeekProvider: FC<{
         reloadCalendarView: swr.mutate,
         ...filters,
         posts: isLoading ? [] : internalData,
+        loading: swr.isLoading,
         integrations,
         setFilters: setFiltersWrapper,
         changeDate,

apps/frontend/src/components/launches/calendar.tsx

@@ -353,12 +353,12 @@ export const CalendarColumn: FC<{
   const {
     integrations,
     posts,
-    trendings,
     changeDate,
     display,
     reloadCalendarView,
     sets,
     signature,
+    loading,
   } = useCalendar();
   const toaster = useToaster();
   const modal = useModals();
@@ -642,6 +642,7 @@ export const CalendarColumn: FC<{
       className={clsx(
         'flex flex-col w-full min-h-full relative',
         isBeforeNow && 'repeated-strip',
+        loading && 'animate-pulse',
         isBeforeNow
           ? 'cursor-not-allowed'
           : 'border border-newTextColor/5 rounded-[8px]'
@@ -664,6 +665,11 @@ export const CalendarColumn: FC<{
             isBeforeNow && postList.length === 0 && 'col-calendar'
           )}
         >
+          {loading && (
+            <div className="h-full w-full p-[5px] animate-pulse absolute left-0 top-0 z-[50]">
+              <div className="h-full w-full bg-newSettings rounded-[10px]" />
+            </div>
+          )}
           {list.map((post) => (
             <div
               key={post.id}