Updated loading for reports.

src/app/(main)/reports/[id]/Report.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { createContext, ReactNode } from 'react';
+import { Loading } from 'react-basics';
 import { useReport } from 'components/hooks';
 import styles from './Report.module.css';
 import classNames from 'classnames';
@@ -17,11 +18,11 @@ export function Report({ reportId, defaultParameters, children, className }: Rep
   const report = useReport(reportId, defaultParameters);
 
   if (!report) {
-    return null;
+    return reportId ? <Loading position="page" /> : null;
   }
 
   return (
-    <ReportContext.Provider value={{ ...report }}>
+    <ReportContext.Provider value={report}>
       <div className={classNames(styles.container, className)}>{children}</div>
     </ReportContext.Provider>
   );

src/app/(main)/reports/[id]/ReportBody.tsx

@@ -1,6 +1,14 @@
 import styles from './ReportBody.module.css';
+import { useContext } from 'react';
+import { ReportContext } from './Report';
 
 export function ReportBody({ children }) {
+  const { report } = useContext(ReportContext);
+
+  if (!report) {
+    return null;
+  }
+
   return <div className={styles.body}>{children}</div>;
 }
 

src/app/(main)/reports/[id]/ReportMenu.tsx

@@ -1,6 +1,14 @@
 import styles from './ReportMenu.module.css';
+import { useContext } from 'react';
+import { ReportContext } from './Report';
 
 export function ReportMenu({ children }) {
+  const { report } = useContext(ReportContext);
+
+  if (!report) {
+    return null;
+  }
+
   return <div className={styles.menu}>{children}</div>;
 }