Merge pull request #233 from El-swaggerito/propchain-2

Propchain 2

Author: LaGodxy

src/app/dashboard/page.tsx

@@ -13,9 +13,13 @@ import { KycStatusBadge } from "@/components/kyc/KycStatusBadge";
 import { useKycStore } from "@/store/kycStore";
 import Link from "next/link";
 import { TransactionSecuritySettings } from "@/components/security/TransactionSecuritySettings";
-import { StakingPanel } from "@/components/dashboard/StakingPanel";
 import { Skeleton } from "@/components/ui/skeleton";
 
+const StakingPanel = dynamic(
+  () => import("@/components/dashboard/StakingPanel").then((m) => m.StakingPanel),
+  { loading: () => <WidgetSkeleton className="h-[400px]" /> }
+);
+
 const PortfolioOverview = dynamic(
   () => import("@/components/dashboard/PortfolioOverview").then((m) => m.PortfolioOverview),
   { loading: () => <WidgetSkeleton className="h-40" /> }

src/components/dashboard/RentalIncomeDistribution.tsx

@@ -7,10 +7,15 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { TrendingUp, Calendar, History } from "lucide-react";
+import dynamic from "next/dynamic";
 import DistributionHistory from "./RentalIncomeDistribution/DistributionHistory";
 import PendingDistributions from "./RentalIncomeDistribution/PendingDistributions";
 import DistributionCalendar from "./RentalIncomeDistribution/DistributionCalendar";
-import CumulativeIncomeChart from "./RentalIncomeDistribution/CumulativeIncomeChart";
+
+const CumulativeIncomeChart = dynamic(
+  () => import("./RentalIncomeDistribution/CumulativeIncomeChart"),
+  { loading: () => <div className="h-80 bg-muted animate-pulse rounded-lg" /> }
+);
 
 export interface Distribution {
   id: string;

src/components/ui/chart.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import { ResponsiveContainer, Tooltip, Legend, type LegendProps } from "recharts"
 
 import { cn } from "@/lib/utils"
 
@@ -43,7 +43,7 @@ function ChartContainer({
 }: React.ComponentProps<"div"> & {
   config: ChartConfig
   children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
+    typeof ResponsiveContainer
   >["children"]
 }) {
   const uniqueId = React.useId()
@@ -61,9 +61,9 @@ function ChartContainer({
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
+        <ResponsiveContainer>
           {children}
-        </RechartsPrimitive.ResponsiveContainer>
+        </ResponsiveContainer>
       </div>
     </ChartContext.Provider>
   )
@@ -102,7 +102,7 @@ ${colorConfig
   )
 }
 
-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = Tooltip
 
 function ChartTooltipContent({
   active,
@@ -118,7 +118,7 @@ function ChartTooltipContent({
   color,
   nameKey,
   labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+}: React.ComponentProps<typeof Tooltip> &
   React.ComponentProps<"div"> & {
     hideLabel?: boolean
     hideIndicator?: boolean
@@ -250,7 +250,7 @@ function ChartTooltipContent({
   )
 }
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = Legend
 
 function ChartLegendContent({
   className,
@@ -259,7 +259,7 @@ function ChartLegendContent({
   verticalAlign = "bottom",
   nameKey,
 }: React.ComponentProps<"div"> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+  Pick<LegendProps, "payload" | "verticalAlign"> & {
     hideIcon?: boolean
     nameKey?: string
   }) {