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>;
 }
 

src/components/hooks/useReport.ts

@@ -4,7 +4,7 @@ import { useTimezone } from './useTimezone';
 import useApi from './useApi';
 import useMessages from './useMessages';
 
-export function useReport(reportId, defaultParameters) {
+export function useReport(reportId: string, defaultParameters: { [key: string]: any }) {
   const [report, setReport] = useState(null);
   const [isRunning, setIsRunning] = useState(false);
   const { get, post } = useApi();
@@ -17,7 +17,7 @@ export function useReport(reportId, defaultParameters) {
     parameters: {},
   };
 
-  const loadReport = async id => {
+  const loadReport = async (id: string) => {
     const data: any = await get(`/reports/${id}`);
 
     const { dateRange } = data?.parameters || {};
@@ -32,7 +32,7 @@ export function useReport(reportId, defaultParameters) {
   };
 
   const runReport = useCallback(
-    async parameters => {
+    async (parameters: { [key: string]: any }) => {
       setIsRunning(true);
 
       const { type } = report;
@@ -50,11 +50,11 @@ export function useReport(reportId, defaultParameters) {
 
       setIsRunning(false);
     },
-    [report],
+    [report, timezone],
   );
 
   const updateReport = useCallback(
-    async data => {
+    async (data: { [x: string]: any; parameters: any }) => {
       setReport(
         produce((state: any) => {
           const { parameters, ...rest } = data;