ActivityChart batching / fallback rendering impro

guildxyz · Sep 12, 2024 · caba6ee · caba6ee
1 parent 8c76f50
commit caba6ee
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/src/app/(marketing)/profile/_components/ActivityChart.tsx b/src/app/(marketing)/profile/_components/ActivityChart.tsx
@@ -2,6 +2,7 @@ import { Skeleton } from "@/components/ui/Skeleton"
 import { Schemas } from "@guildxyz/types"
 import { localPoint } from "@visx/event"
 import { Group } from "@visx/group"
+import ParentSize from "@visx/responsive/lib/components/ParentSize"
 import { scaleBand, scaleLinear } from "@visx/scale"
 import { Bar } from "@visx/shape"
 import { useTooltip, useTooltipInPortal } from "@visx/tooltip"
@@ -21,7 +22,8 @@ export type BarsProps = {
 }
 
 let tooltipTimeout: number
-export const ActivityChartChildren = ({
+
+const ActivityChartChildren = ({
   width,
   height,
   rawData,
@@ -144,10 +146,21 @@ export const ActivityChartChildren = ({
   )
 }
 
-export const ActivityChart = ({ width, height }: BarsProps) => {
+export const ActivityChart = () => {
   const { data: rawData } = useExperiences({ count: false })
-  if (!rawData) return <Skeleton style={{ width, height }} />
+
+  if (!rawData) return <Skeleton className="h-7 w-full" />
+
   if (rawData.length === 0)
     return <p className="text-muted-foreground">There's no activity this month</p>
-  return <ActivityChartChildren height={height} width={width} rawData={rawData} />
+
+  return (
+    <div className="h-7">
+      <ParentSize>
+        {({ width, height }) => (
+          <ActivityChartChildren height={height} width={width} rawData={rawData} />
+        )}
+      </ParentSize>
+    </div>
+  )
 }
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -4,7 +4,6 @@ import { Card } from "@/components/ui/Card"
 import { ProgressIndicator, ProgressRoot } from "@/components/ui/Progress"
 import { cn } from "@/lib/utils"
 import { Info } from "@phosphor-icons/react"
-import ParentSize from "@visx/responsive/lib/components/ParentSize"
 import { PropsWithChildren } from "react"
 import { ContributionCard } from "../_components/ContributionCard"
 import { EditContributions } from "../_components/EditContributions"
@@ -62,13 +61,7 @@ export const Profile = () => {
             <div className="flex flex-col items-start justify-between gap-2 sm:flex-row">
               <h3 className="font-bold">Engagement this month</h3>
             </div>
-            <div className="h-7">
-              <ParentSize>
-                {({ width, height }) => (
-                  <ActivityChart width={width} height={height} />
-                )}
-              </ParentSize>
-            </div>
+            <ActivityChart />
           </Card>
         </div>
       </div>