Refactor code and improve usage of package dependencies

This commit updates the naming convention of icons from Lucide-React, moving some package dependencies to "peerDependencies" in 'team-accounts', 'admin' and 'auth'. Additionally, it includes tweaks to the development server command in apps/web package.json and adds a logger reference to the shared package. Furthermore, cleanup work has been performed within the features and UI packages, and new scripts to interact with Stripe have been added to the root package.json.

packages/billing-gateway/src/components/embedded-checkout.tsx

@@ -1,9 +1,14 @@
-import { lazy } from 'react';
+import { Suspense, forwardRef, lazy, memo, useMemo } from 'react';
 
 import { Database } from '@kit/supabase/database';
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
 
 type BillingProvider = Database['public']['Enums']['billing_provider'];
 
+const Fallback = (
+  <LoadingOverlay fullPage={false}>Loading Checkout...</LoadingOverlay>
+);
+
 export function EmbeddedCheckout(
   props: React.PropsWithChildren<{
     checkoutToken: string;
@@ -11,7 +16,10 @@ export function EmbeddedCheckout(
     onClose?: () => void;
   }>,
 ) {
-  const CheckoutComponent = loadCheckoutComponent(props.provider);
+  const CheckoutComponent = useMemo(
+    () => memo(loadCheckoutComponent(props.provider)),
+    [],
+  );
 
   return (
     <CheckoutComponent
@@ -24,10 +32,12 @@ export function EmbeddedCheckout(
 function loadCheckoutComponent(provider: BillingProvider) {
   switch (provider) {
     case 'stripe': {
-      return lazy(() => {
-        return import('@kit/stripe/components').then((c) => ({
-          default: c.StripeCheckout,
-        }));
+      return buildLazyComponent(() => {
+        return import('@kit/stripe/components').then(({ StripeCheckout }) => {
+          return {
+            default: StripeCheckout,
+          };
+        });
       });
     }
 
@@ -43,3 +53,33 @@ function loadCheckoutComponent(provider: BillingProvider) {
       throw new Error(`Unsupported provider: ${provider as string}`);
   }
 }
+
+function buildLazyComponent<
+  Cmp extends React.ComponentType<
+    React.PropsWithChildren<{
+      onClose?: (() => unknown) | undefined;
+      checkoutToken: string;
+    }>
+  >,
+>(
+  load: () => Promise<{
+    default: Cmp;
+  }>,
+  fallback = Fallback,
+) {
+  let LoadedComponent: ReturnType<typeof lazy> | null = null;
+
+  const LazyComponent = forwardRef((props, ref) => {
+    if (!LoadedComponent) {
+      LoadedComponent = lazy(load);
+    }
+
+    return (
+      <Suspense fallback={fallback}>
+        <LoadedComponent {...props} ref={ref} />
+      </Suspense>
+    );
+  });
+
+  return memo(LazyComponent);
+}