Alternative approach to setting progress bar width

cloud-gov · Nov 4, 2024 · 1c3d7a2 · 1c3d7a2
1 parent 61de4e1
commit 1c3d7a2
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 17 deletions.
diff --git a/src/app/orgs/page.tsx b/src/app/orgs/page.tsx
@@ -1,15 +1,12 @@
 'use server';
 
-import { headers } from 'next/headers';
 import { getOrgsPage } from '@/controllers/controllers';
 import { OrganizationsList } from '@/components/OrganizationsList/OrganizationsList';
 import { PageHeader } from '@/components/PageHeader';
 import { LastViewedOrgLink } from '@/components/LastViewedOrgLink';
 import { Timestamp } from '@/components/Timestamp';
 
 export default async function OrgsPage() {
-  const headersList = await headers();
-  const nonce = headersList.get('x-nonce') || undefined;
   const { payload } = await getOrgsPage();
 
   return (
@@ -31,7 +28,6 @@ export default async function OrgsPage() {
         memoryCurrentUsage={payload.memoryCurrentUsage}
         spaceCounts={payload.spaceCounts}
         roles={payload.roles}
-        nonce={nonce}
       />
     </div>
   );

diff --git a/src/components/MemoryBar.tsx b/src/components/MemoryBar.tsx
@@ -4,19 +4,17 @@ import { formatMb } from '@/helpers/numbers';
 export function MemoryBar({
   memoryUsed,
   memoryAllocated,
-  nonce,
 }: {
   memoryUsed?: number | null | undefined;
   memoryAllocated?: number | null | undefined;
-  nonce: string | undefined;
 }) {
   const memoryUsedNum = memoryUsed || 0;
   const mbRemaining = (memoryAllocated || 0) - memoryUsedNum;
   return (
     <div className="margin-top-3" data-testid="memory-bar">
       <p className="font-sans-3xs text-uppercase text-bold">Memory:</p>
 
-      <ProgressBar total={memoryAllocated} fill={memoryUsedNum} nonce={nonce} />
+      <ProgressBar total={memoryAllocated} fill={memoryUsedNum} />
 
       <div className="margin-top-1 display-flex flex-justify font-sans-3xs">
         <div className="margin-right-1">

diff --git a/src/components/OrganizationsList/OrganizationsList.tsx b/src/components/OrganizationsList/OrganizationsList.tsx
@@ -12,7 +12,6 @@ export function OrganizationsList({
   memoryCurrentUsage,
   spaceCounts,
   roles,
-  nonce,
 }: {
   orgs: Array<OrgObj>;
   userCounts: { [orgGuid: string]: number };
@@ -21,7 +20,6 @@ export function OrganizationsList({
   memoryCurrentUsage: { [orgGuid: string]: number };
   spaceCounts: { [orgGuid: string]: number };
   roles: { [orgGuid: string]: Array<string> };
-  nonce: string | undefined;
 }) {
   if (!orgs.length) {
     return <>no orgs found</>;
@@ -46,7 +44,6 @@ export function OrganizationsList({
                   memoryCurrentUsage={memoryCurrentUsage[org.guid]}
                   spaceCount={spaceCounts[org.guid]}
                   roles={roles[org.guid]}
-                  nonce={nonce}
                 />
               );
             })}

diff --git a/src/components/OrganizationsList/OrganizationsListCard.tsx b/src/components/OrganizationsList/OrganizationsListCard.tsx
@@ -15,7 +15,6 @@ export async function OrganizationsListCard({
   memoryCurrentUsage,
   spaceCount,
   roles,
-  nonce,
 }: {
   org: OrgObj;
   userCount: number;
@@ -24,7 +23,6 @@ export async function OrganizationsListCard({
   memoryCurrentUsage: number;
   spaceCount: number;
   roles: Array<string>;
-  nonce: string | undefined;
 }) {
   const getOrgRolesText = (orgGuid: string): React.ReactNode => {
     if (!roles || !roles.length) {
@@ -83,7 +81,6 @@ export async function OrganizationsListCard({
       <MemoryBar
         memoryUsed={memoryCurrentUsage}
         memoryAllocated={memoryAllocated}
-        nonce={nonce}
       />
     </Card>
   );

diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { useLayoutEffect, useRef } from 'react';
 import { InfinitySVG } from '@/components/svgs/InfinitySVG';
 
 export function ProgressBar({
@@ -6,17 +9,23 @@ export function ProgressBar({
   threshold1 = 75, // percentage where color should change first, between 0 and 100
   threshold2 = 90, // percentage where color should change next, between 0 and 100
   changeColors = true,
-  nonce,
 }: {
   total: number | null | undefined;
   fill: number;
   threshold1?: number;
   threshold2?: number;
   changeColors?: boolean;
-  nonce: string | undefined;
 }) {
   const heightClass = 'height-1';
   const percentage = total ? Math.floor((fill / total) * 100) : 100;
+  const barRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (barRef.current) {
+      barRef.current.style.width = `${percentage}%`;
+    }
+  }, [percentage]);
+
   let color = 'bg-mint';
   if (changeColors && percentage > threshold1 && percentage < threshold2) {
     color = 'bg-red-30v';
@@ -33,9 +42,8 @@ export function ProgressBar({
     >
       <div
         className={`${heightClass} radius-pill ${color}`}
-        style={{ width: `${percentage}%` }}
         data-testid="progress"
-        nonce={nonce}
+        ref={barRef}
       ></div>
       {!total && (
         <span className="progress__infinity-logo">