perf: calendar interaction (#1112)

* perf: add loading animation when loading data in calendar view

* feat: add time prefix to event

Author: Sky-FE

apps/nextjs-app/package.json

@@ -132,6 +132,7 @@
     "buffer": "6.0.3",
     "class-variance-authority": "0.7.0",
     "date-fns": "2.30.0",
+    "date-fns-tz": "2.0.1",
     "dayjs": "1.11.10",
     "echarts": "5.5.0",
     "emoji-mart": "5.5.2",

apps/nextjs-app/src/features/app/blocks/view/calendar/components/Calendar.tsx

@@ -10,7 +10,7 @@ import type { EventResizeDoneArg } from '@fullcalendar/interaction';
 import interactionPlugin from '@fullcalendar/interaction';
 import FullCalendar from '@fullcalendar/react';
 import { FieldKeyType } from '@teable/core';
-import { ChevronLeft, ChevronRight, Calendar as CalendarIcon } from '@teable/icons';
+import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, Loader2 } from '@teable/icons';
 import { updateRecord } from '@teable/openapi';
 import { AppContext, CalendarDailyCollectionContext } from '@teable/sdk/context';
 import { useTableId } from '@teable/sdk/hooks';
@@ -25,6 +25,7 @@ import {
   PopoverContent,
   PopoverTrigger,
   Calendar as DatePicker,
+  cn,
 } from '@teable/ui-lib/shadcn';
 import { addDays, format } from 'date-fns';
 import { enUS, zhCN, ja, ru, fr } from 'date-fns/locale';
@@ -34,7 +35,7 @@ import { tableConfig } from '@/features/i18n/table.config';
 import { EventListContainer } from '../components/EventListContainer';
 import { EventMenu } from '../components/EventMenu';
 import { useCalendar, useEventMenuStore } from '../hooks';
-import { getColorByConfig } from '../util';
+import { getColorByConfig, getEventTitle } from '../util';
 
 const ADD_EVENT_BUTTON_CLASS_NAME = 'calendar-add-event-button';
 const MORE_LINK_TEXT_CLASS_NAME = 'calendar-custom-more-link-text';
@@ -203,6 +204,7 @@ export const Calendar = (props: ICalendarProps) => {
     });
   };
 
+  const isLoading = !calendarDailyCollection;
   const { countMap, records = [] } = calendarDailyCollection ?? {};
 
   const events = useMemo(() => {
@@ -222,8 +224,12 @@ export const Calendar = (props: ICalendarProps) => {
 
         return {
           id: r.id,
-          title: titleField.cellValue2String(title) || t('untitled'),
-          start: startDateField.cellValue2String(start),
+          title: getEventTitle(
+            titleField.cellValue2String(title) || t('sdk:common.unnamedRecord'),
+            start as string,
+            startDateField
+          ),
+          start,
           end: end ? addDays(new Date(end as string), 1).toISOString() : undefined,
           textColor,
           backgroundColor,
@@ -372,8 +378,14 @@ export const Calendar = (props: ICalendarProps) => {
     <div className="relative flex size-full flex-col overflow-hidden p-4 pt-2" ref={containerRef}>
       <div className="mb-2 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <h2 className="text-xl font-semibold">
+          <h2 className="flex items-center text-xl font-semibold">
             {title || calendarRef.current?.getApi().view.title}
+            <Loader2
+              className={cn(
+                'ml-1 size-5 animate-spin transition-opacity duration-1000',
+                isLoading ? 'opacity-100' : 'opacity-0'
+              )}
+            />
           </h2>
         </div>
         <div className="flex items-center gap-2">

apps/nextjs-app/src/features/app/blocks/view/calendar/components/EventList.tsx

@@ -3,7 +3,10 @@ import { RecordItem, RecordList } from '@teable/sdk/components';
 import { useRowCount } from '@teable/sdk/hooks';
 import { useInfiniteRecords } from '@teable/sdk/hooks/use-infinite-records';
 import { Skeleton } from '@teable/ui-lib/shadcn';
+import { useTranslation } from 'next-i18next';
+import { tableConfig } from '@/features/i18n/table.config';
 import { useCalendar } from '../hooks';
+import { getEventTitle } from '../util';
 
 interface IEventListProps {
   query?: IQueryBaseRo;
@@ -12,7 +15,8 @@ interface IEventListProps {
 export const EventList = (props: IEventListProps) => {
   const { query } = props;
   const rowCount = useRowCount();
-  const { setExpandRecordId } = useCalendar();
+  const { titleField, startDateField, endDateField, setExpandRecordId } = useCalendar();
+  const { t } = useTranslation(tableConfig.i18nNamespaces);
 
   const { onVisibleRegionChanged, recordMap } = useInfiniteRecords(query);
 
@@ -23,10 +27,20 @@ export const EventList = (props: IEventListProps) => {
       itemClassName="p-0 rounded-md aria-selected:bg-transparent aria-selected:text-inherit"
       itemRender={(index) => {
         const record = recordMap[index];
-        if (!record) {
+
+        if (!record || !titleField || !startDateField || !endDateField) {
           return <Skeleton className="h-[30px] w-full" />;
         }
-        return <RecordItem title={record.name} className="bg-background py-1" />;
+
+        const title = record.fields[titleField.id];
+        const start = record.fields[startDateField.id];
+        const displayTitle = getEventTitle(
+          titleField.cellValue2String(title) || t('sdk:common.unnamedRecord'),
+          start as string,
+          startDateField
+        );
+
+        return <RecordItem title={displayTitle} className="bg-background py-1" />;
       }}
       rowCount={rowCount ?? 0}
       onSelect={(index) => {

apps/nextjs-app/src/features/app/blocks/view/calendar/util.ts

@@ -1,7 +1,8 @@
 import type { IColorConfig } from '@teable/core';
-import { ColorConfigType } from '@teable/core';
+import { ColorConfigType, TimeFormatting } from '@teable/core';
 import { getColorPairs } from '@teable/sdk/components';
-import type { Record, SingleSelectField } from '@teable/sdk/model';
+import type { DateField, Record, SingleSelectField } from '@teable/sdk/model';
+import { formatInTimeZone } from 'date-fns-tz';
 import { DEFAULT_COLOR } from './components/CalendarConfig';
 
 export const getColorByConfig = (
@@ -22,3 +23,15 @@ export const getColorByConfig = (
   }
   return getColorPairs(color ?? DEFAULT_COLOR);
 };
+
+export const getEventTitle = (title: string, startDate: string | null, dateField: DateField) => {
+  const { time, timeZone } = dateField.options.formatting;
+  const includeTime = time !== TimeFormatting.None;
+  const timeStr = time === TimeFormatting.Hour24 ? time : 'hh:mm a';
+  const prefixStr =
+    includeTime && startDate
+      ? `${formatInTimeZone(new Date(startDate as string), timeZone, timeStr)} `
+      : '';
+
+  return `${prefixStr}${title}`;
+};