Change simulator summary to show 0 roi and gains while loading simula…

…tor api query

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={{

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">