From 551dbf162b5d25cf9b11b50d1bb23298f6d6bed7 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Mon, 11 Mar 2024 12:21:19 -0400
Subject: [PATCH 1/3] Remove a useMemo which wasn't doing any expensive
 calculations

---
 .../ui/proposal/ProposalCountdown.tsx           | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/ui/proposal/ProposalCountdown.tsx b/src/components/ui/proposal/ProposalCountdown.tsx
index f73e7456eb..beff5bdb3a 100644
--- a/src/components/ui/proposal/ProposalCountdown.tsx
+++ b/src/components/ui/proposal/ProposalCountdown.tsx
@@ -31,16 +31,13 @@ export function ProposalCountdown({
   const state: FractalProposalState | null = useMemo(() => proposal.state, [proposal]);
 
   const { isSnapshotProposal } = useSnapshotProposal(proposal);
-  const showCountdown = useMemo(
-    () =>
-      !!secondsLeft &&
-      secondsLeft > 0 &&
-      (state === FractalProposalState.ACTIVE ||
-        state === FractalProposalState.TIMELOCKED ||
-        state === FractalProposalState.EXECUTABLE ||
-        isSnapshotProposal),
-    [state, secondsLeft, isSnapshotProposal],
-  );
+  const showCountdown =
+    !!secondsLeft &&
+    secondsLeft > 0 &&
+    (state === FractalProposalState.ACTIVE ||
+      state === FractalProposalState.TIMELOCKED ||
+      state === FractalProposalState.EXECUTABLE ||
+      isSnapshotProposal);
 
   if (!showCountdown) return null;
 

From 32478ac594b157551450e96c657fa7bd7a802a72 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Mon, 11 Mar 2024 12:27:38 -0400
Subject: [PATCH 2/3] Create simple booleans to check if segments should be
 shown or not

Importantly, show a segment if the segment to the left is shown, OR, it's greater than 0.
---
 src/components/ui/proposal/ProposalCountdown.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/proposal/ProposalCountdown.tsx b/src/components/ui/proposal/ProposalCountdown.tsx
index beff5bdb3a..66852cf456 100644
--- a/src/components/ui/proposal/ProposalCountdown.tsx
+++ b/src/components/ui/proposal/ProposalCountdown.tsx
@@ -64,6 +64,11 @@ export function ProposalCountdown({
   const hoursLeft = Math.floor((secondsLeft! / (60 * 60)) % 24);
   const minutesLeft = Math.floor((secondsLeft! / 60) % 60);
 
+  const showDays = daysLeft > 0;
+  const showHours = showDays || hoursLeft > 0;
+  const showMinutes = showHours || minutesLeft > 0;
+  const showSeconds = secondsLeft >= 0;
+
   return (
     <Tooltip
       label={tooltipLabel}
@@ -82,10 +87,10 @@ export function ProposalCountdown({
             color="chocolate.200"
             textStyle="text-base-mono-semibold"
           >
-            {daysLeft > 0 && `${zeroPad(daysLeft)}:`}
-            {hoursLeft > 0 && `${zeroPad(hoursLeft)}:`}
-            {minutesLeft > 0 && `${zeroPad(minutesLeft)}:`}
-            {secondsLeft! >= 0 && `${zeroPad(secondsLeft! % 60)}`}
+            {showDays && `${zeroPad(daysLeft)}:`}
+            {showHours && `${zeroPad(hoursLeft)}:`}
+            {showMinutes && `${zeroPad(minutesLeft)}:`}
+            {showSeconds && `${zeroPad(secondsLeft % 60)}`}
           </Text>
         </Flex>
       </Flex>

From 2940014ca8de34e5d911ecdfbed88ab57eae7ef7 Mon Sep 17 00:00:00 2001
From: Adam Gall <galladamj@gmail.com>
Date: Mon, 11 Mar 2024 14:20:20 -0400
Subject: [PATCH 3/3] Clean up consistency and remove unnecessary "!"s

---
 src/components/ui/proposal/ProposalCountdown.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/proposal/ProposalCountdown.tsx b/src/components/ui/proposal/ProposalCountdown.tsx
index 66852cf456..c7d0ac17c3 100644
--- a/src/components/ui/proposal/ProposalCountdown.tsx
+++ b/src/components/ui/proposal/ProposalCountdown.tsx
@@ -25,15 +25,15 @@ export function ProposalCountdown({
   proposal: FractalProposal;
   showIcon?: boolean;
 }) {
-  const secondsLeft = useProposalCountdown(proposal);
+  const totalSecondsLeft = useProposalCountdown(proposal);
   const { t } = useTranslation('proposal');
 
   const state: FractalProposalState | null = useMemo(() => proposal.state, [proposal]);
 
   const { isSnapshotProposal } = useSnapshotProposal(proposal);
   const showCountdown =
-    !!secondsLeft &&
-    secondsLeft > 0 &&
+    !!totalSecondsLeft &&
+    totalSecondsLeft > 0 &&
     (state === FractalProposalState.ACTIVE ||
       state === FractalProposalState.TIMELOCKED ||
       state === FractalProposalState.EXECUTABLE ||
@@ -60,9 +60,10 @@ export function ProposalCountdown({
           ? Execute
           : null;
 
-  const daysLeft = Math.floor(secondsLeft! / (60 * 60 * 24));
-  const hoursLeft = Math.floor((secondsLeft! / (60 * 60)) % 24);
-  const minutesLeft = Math.floor((secondsLeft! / 60) % 60);
+  const daysLeft = Math.floor(totalSecondsLeft / (60 * 60 * 24));
+  const hoursLeft = Math.floor((totalSecondsLeft / (60 * 60)) % 24);
+  const minutesLeft = Math.floor((totalSecondsLeft / 60) % 60);
+  const secondsLeft = Math.floor(totalSecondsLeft % 60);
 
   const showDays = daysLeft > 0;
   const showHours = showDays || hoursLeft > 0;
@@ -90,7 +91,7 @@ export function ProposalCountdown({
             {showDays && `${zeroPad(daysLeft)}:`}
             {showHours && `${zeroPad(hoursLeft)}:`}
             {showMinutes && `${zeroPad(minutesLeft)}:`}
-            {showSeconds && `${zeroPad(secondsLeft % 60)}`}
+            {showSeconds && `${zeroPad(secondsLeft)}`}
           </Text>
         </Flex>
       </Flex>