Updated reports.

src/components/common/LoadingPanel.tsx

@@ -1,9 +1,7 @@
 import { ReactNode } from 'react';
-import classNames from 'classnames';
-import { Spinner, Dots } from '@umami/react-zen';
+import { Spinner, Dots, Column, type ColumnProps } from '@umami/react-zen';
 import { ErrorMessage } from '@/components/common/ErrorMessage';
 import { Empty } from '@/components/common/Empty';
-import styles from './LoadingPanel.module.css';
 
 export function LoadingPanel({
   error,
@@ -12,25 +10,23 @@ export function LoadingPanel({
   isLoading,
   loadingIcon = 'dots',
   renderEmpty = () => <Empty />,
-  className,
   children,
+  ...props
 }: {
-  data?: any;
   error?: Error;
   isEmpty?: boolean;
   isFetched?: boolean;
   isLoading?: boolean;
   loadingIcon?: 'dots' | 'spinner';
   renderEmpty?: () => ReactNode;
-  className?: string;
   children: ReactNode;
-}) {
+} & ColumnProps) {
   return (
-    <div className={classNames(styles.panel, className)}>
+    <Column {...props}>
       {isLoading && !isFetched && (loadingIcon === 'dots' ? <Dots /> : <Spinner />)}
       {error && <ErrorMessage />}
       {!error && !isLoading && isEmpty && renderEmpty()}
       {!error && !isLoading && !isEmpty && children}
-    </div>
+    </Column>
   );
 }