fix: fix loading delays for cached data (#3549)

* fix: loading transition

* fix: add check to usePoll

src/lib/css/loading.ts

@@ -10,5 +10,5 @@ export const loadingCss = css`
 // need to use isLoading as `loading` is a reserved prop
 export const loadingTransitionCss = css<{ isLoading: boolean }>`
   ${({ isLoading }) => isLoading && loadingCss};
-  transition: opacity 0.2s ease-in-out;
+  transition: opacity ${({ isLoading }) => (isLoading ? 0 : 0.2)}s ease-in-out;
 `

src/lib/hooks/routing/useClientSideSmartOrderRouterTrade.ts

@@ -80,7 +80,7 @@ export default function useClientSideSmartOrderRouterTrade<TTradeType extends Tr
     }
   }, [config, params, queryArgs, wrapType])
 
-  const { data, error } = usePoll(getQuoteResult, JSON.stringify(queryArgs)) ?? {
+  const { data, error } = usePoll(getQuoteResult, JSON.stringify(queryArgs), isDebouncing) ?? {
     error: undefined,
   }
 
@@ -118,7 +118,7 @@ export default function useClientSideSmartOrderRouterTrade<TTradeType extends Tr
     }
 
     // Returns the last trade state while syncing/loading to avoid jank from clearing the last trade while loading.
-    if (!error) {
+    if (!quoteResult && !error) {
       if (isStale) {
         return { state: TradeState.LOADING, trade: undefined }
       } else if (isDebouncing) {

src/lib/hooks/usePoll.ts

@@ -7,6 +7,7 @@ const DEFAULT_KEEP_UNUSED_DATA_FOR = ms`10s`
 export default function usePoll<T>(
   fetch: () => Promise<T>,
   key = '',
+  check = false, // set to true to check the cache without initiating a new request
   pollingInterval = DEFAULT_POLLING_INTERVAL,
   keepUnusedDataFor = DEFAULT_KEEP_UNUSED_DATA_FOR
 ): T | undefined {
@@ -14,6 +15,8 @@ export default function usePoll<T>(
   const [, setData] = useState<{ key: string; result?: T }>({ key })
 
   useEffect(() => {
+    if (check) return
+
     let timeout: number
 
     const entry = cache.get(key)
@@ -41,7 +44,7 @@ export default function usePoll<T>(
         return data.key === key ? { key, result } : data
       })
     }
-  }, [cache, fetch, keepUnusedDataFor, key, pollingInterval])
+  }, [cache, check, fetch, keepUnusedDataFor, key, pollingInterval])
 
   useEffect(() => {
     // Cleanup stale entries when a new key is used.