dashboard: add retention and quick fix loading states

apps/dashboard/src/hocs/with-loading-widget.tsx

@@ -0,0 +1,34 @@
+import { Suspense } from 'react';
+import { ChartLoading } from '@/components/report/chart/ChartLoading';
+import { Widget, WidgetHead } from '@/components/widget';
+
+type Props = Record<string, unknown> & {
+  className?: string;
+};
+
+const withLoadingWidget = <P extends Props>(
+  Component: React.ComponentType<P>
+) => {
+  const WithLoadingWidget: React.ComponentType<P> = (props) => {
+    return (
+      <Suspense
+        fallback={
+          <Widget className={props.className}>
+            <WidgetHead>
+              <span className="title">Loading...</span>
+            </WidgetHead>
+            <ChartLoading />
+          </Widget>
+        }
+      >
+        <Component {...(props as any)} />
+      </Suspense>
+    );
+  };
+
+  WithLoadingWidget.displayName = `WithLoadingWidget(${Component.displayName})`;
+
+  return WithLoadingWidget;
+};
+
+export default withLoadingWidget;

apps/dashboard/src/hocs/with-suspense.tsx

@@ -0,0 +1,21 @@
+import { Suspense } from 'react';
+
+const withSuspense = <P,>(
+  Component: React.ComponentType<P>,
+  Fallback: React.ComponentType<P>
+) => {
+  const WithSuspense: React.ComponentType<P> = (props) => {
+    const fallback = <Fallback {...(props as any)} key="faaaaalling" />;
+    return (
+      <Suspense fallback={fallback}>
+        <Component {...(props as any)} />
+      </Suspense>
+    );
+  };
+
+  WithSuspense.displayName = `WithSuspense(${Component.displayName})`;
+
+  return WithSuspense;
+};
+
+export default withSuspense;