From 48fdb155f96e8f1b3d7577a974033c67ff97f0b8 Mon Sep 17 00:00:00 2001
From: Tiago Silva <tfn.da.silva@gmail.com>
Date: Mon, 29 Jan 2024 13:00:34 +0000
Subject: [PATCH] Change simulator summary to show 0 roi and gains while
 loading simulator api query

---
 src/components/simulator/SimulatorSummary.tsx | 10 +++++++---
 src/pages/simulator/result/index.tsx          |  6 +++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/simulator/SimulatorSummary.tsx b/src/components/simulator/SimulatorSummary.tsx
index aa6a1869b..238434706 100644
--- a/src/components/simulator/SimulatorSummary.tsx
+++ b/src/components/simulator/SimulatorSummary.tsx
@@ -9,11 +9,15 @@ import { useTokens } from 'hooks/useTokens';
 interface Props {
   roi: number;
   gains: number;
+  isLoading: boolean;
 }
 
-export const SimulatorSummary = ({ roi, gains }: Props) => {
+export const SimulatorSummary = ({ roi, gains, isLoading }: Props) => {
   const search = useSearch({ from: '/simulator/result' });
 
+  const portfolioGains = isLoading ? 0.0 : gains;
+  const portfolioRoi = isLoading ? 0.0 : roi;
+
   const { getTokenById } = useTokens();
   const baseToken = getTokenById(search.baseToken);
   const quoteToken = getTokenById(search.quoteToken);
@@ -45,10 +49,10 @@ export const SimulatorSummary = ({ roi, gains }: Props) => {
       </section>
       <section className="flex flex-grow flex-wrap items-center justify-evenly gap-8 rounded-10 bg-black p-16 md:justify-between">
         <SimulatorSummaryGains
-          portfolioGains={gains}
+          portfolioGains={portfolioGains}
           quoteToken={quoteToken!}
         />
-        <SimulatorSummaryRoi portfolioRoi={roi} />
+        <SimulatorSummaryRoi portfolioRoi={portfolioRoi} />
         <Link
           to="/strategies/create"
           search={{
diff --git a/src/pages/simulator/result/index.tsx b/src/pages/simulator/result/index.tsx
index 9548cc0d8..913687161 100644
--- a/src/pages/simulator/result/index.tsx
+++ b/src/pages/simulator/result/index.tsx
@@ -59,7 +59,11 @@ export const SimulatorResultPage = () => {
       <div className="rounded-20 bg-silver p-20">
         {ctx.data && ctx.roi && ctx.gains && ctx.bounds && (
           <>
-            <SimulatorSummary roi={ctx.roi} gains={ctx.gains} />
+            <SimulatorSummary
+              roi={ctx.roi}
+              gains={ctx.gains}
+              isLoading={ctx.isLoading}
+            />
             {!ctx.isLoading ? (
               <>
                 <div className="rounded-10 bg-black py-10">