feat: dashboard v2, esm, upgrades (#211)

* esm

* wip

* wip

* wip

* wip

* wip

* wip

* subscription notice

* wip

* wip

* wip

* fix envs

* fix: update docker build

* fix

* esm/types

* delete dashboard :D

* add patches to dockerfiles

* update packages + catalogs + ts

* wip

* remove native libs

* ts

* improvements

* fix redirects and fetching session

* try fix favicon

* fixes

* fix

* order and resize reportds within a dashboard

* improvements

* wip

* added userjot to dashboard

* fix

* add op

* wip

* different cache key

* improve date picker

* fix table

* event details loading

* redo onboarding completely

* fix login

* fix

* fix

* extend session, billing and improve bars

* fix

* reduce price on 10M

apps/start/src/components/lazy-component.tsx

@@ -0,0 +1,79 @@
+import { type ReactNode, type RefObject, useEffect, useRef } from 'react';
+import { useInViewport } from 'react-in-viewport';
+
+export interface LazyComponentProps {
+  /**
+   * Whether to enable lazy loading. If false, component renders immediately.
+   * @default true
+   */
+  lazy?: boolean;
+
+  /**
+   * Content to render when the component is in viewport (or immediately if lazy=false)
+   */
+  children: ReactNode;
+
+  /**
+   * Optional loading placeholder to show while waiting for viewport intersection
+   */
+  fallback?: ReactNode;
+
+  /**
+   * Additional className for the wrapper div
+   */
+  className?: string;
+
+  /**
+   * Custom viewport options for intersection observer
+   */
+  viewportOptions?: {
+    rootMargin?: string;
+    threshold?: number | number[];
+  };
+
+  /**
+   * Whether to disconnect the intersection observer after first load
+   * @default true
+   */
+  disconnectOnLeave?: boolean;
+}
+
+/**
+ * A reusable lazy loading component that renders its children only when
+ * they come into the viewport (or immediately if lazy=false).
+ *
+ * Uses intersection observer under the hood for efficient viewport detection.
+ */
+export const LazyComponent = ({
+  lazy = true,
+  children,
+  fallback = null,
+  className,
+  viewportOptions,
+  disconnectOnLeave = true,
+}: LazyComponentProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const once = useRef(false);
+
+  const { inViewport } = useInViewport(
+    ref as RefObject<HTMLElement>,
+    viewportOptions,
+    {
+      disconnectOnLeave,
+    },
+  );
+
+  useEffect(() => {
+    if (inViewport) {
+      once.current = true;
+    }
+  }, [inViewport]);
+
+  const shouldRender = lazy ? once.current || inViewport : true;
+
+  return (
+    <div ref={ref} className={className}>
+      {shouldRender ? children : (fallback ?? <div />)}
+    </div>
+  );
+};