Merge pull request #68 from linked-planet/dev

added centered loading spinner and time table custom header width han…

Author: marcus-wishes

library/src/components/LoadingSpinner.tsx

@@ -1,4 +1,4 @@
-import React, { type CSSProperties } from "react"
+import type { CSSProperties } from "react"
 import { twMerge } from "tailwind-merge"
 type Size = "xsmall" | "small" | "medium" | "large" | "xlarge"
 
@@ -44,3 +44,25 @@ export function LoadingSpinner({
 		/>
 	)
 }
+
+export function LoadingSpinnerCentered({
+	style,
+	className,
+	size,
+}: {
+	style?: React.CSSProperties
+	className?: string
+	size?: Size
+}) {
+	return (
+		<div
+			className={twMerge(
+				"absolute inset-0 flex justify-center items-center",
+				className,
+			)}
+			style={style}
+		>
+			<LoadingSpinner size={size} />
+		</div>
+	)
+}

library/src/components/timetable/TimeTableHeader.tsx

@@ -6,7 +6,7 @@ dayjs.extend(weekOfYear)
 dayjs.extend(weekYear)
 dayjs.extend(localeData)
 import type React from "react"
-import { Fragment, type RefObject, useRef } from "react"
+import { Fragment, type RefObject, useCallback, useRef, useState } from "react"
 
 // if more locales then english and germans are needed, we need to enable them first here
 import "dayjs/locale/de"
@@ -22,6 +22,7 @@ import type {
 	TimeTableViewType,
 } from "./TimeTable"
 import type { TimeFrameDay } from "./TimeTableConfigStore"
+import useResizeObserver, { type ObservedSize } from "use-resize-observer"
 
 const headerTimeSlotFormat: { [viewType in TimeTableViewType]: string } = {
 	hours: "HH:mm",
@@ -69,6 +70,7 @@ export type CustomHeaderRowTimeSlotProps<
 	entries: TimeTableEntry<G, I>[]
 	slotsArray: readonly Dayjs[]
 	tableCellRef: RefObject<HTMLTableCellElement>
+	tableCellWidth: number
 }
 
 export type CustomHeaderRowHeaderProps<
@@ -358,7 +360,22 @@ function CustomHeaderRowCell<
 		header: (props: CustomHeaderRowHeaderProps<G, I>) => JSX.Element
 	}
 }) {
-	const ref = useRef<HTMLTableCellElement>(null)
+	// this is the same as in the TableCell component
+	const tableCellRef = useRef<HTMLTableCellElement>(null)
+	const [tableCellWidth, setTableCellWidth] = useState(
+		tableCellRef.current?.offsetWidth ?? 70,
+	)
+
+	const resizeCallback = useCallback((observedSize: ObservedSize) => {
+		setTableCellWidth(observedSize.width ?? 70)
+	}, [])
+	useResizeObserver({
+		ref: tableCellRef,
+		onResize: resizeCallback,
+		box: "border-box",
+		round: (n: number) => n, // we don't need rounding here
+	})
+	//
 
 	return (
 		<th
@@ -367,7 +384,7 @@ function CustomHeaderRowCell<
 			className={`${headerCellBaseClassname} ${
 				isLastOfDay ? "after:border-l-2" : "after:border-l"
 			}`}
-			ref={ref}
+			ref={tableCellRef}
 		>
 			{customHeaderRow.timeSlot({
 				timeSlot,
@@ -377,7 +394,8 @@ function CustomHeaderRowCell<
 				viewType,
 				entries,
 				slotsArray,
-				tableCellRef: ref,
+				tableCellRef,
+				tableCellWidth,
 			})}
 		</th>
 	)