fix: token list management bug (#6544)

* refactor: improve token list management and enhance auto-import functionality

* refactor: replace legacy loading component with new Loader and enhance token selection logic

* refactor: update loading components and enhance token management logic

Author: fairlighteth

apps/cowswap-frontend/src/modules/application/containers/App/RoutesApp.tsx

@@ -59,10 +59,8 @@ function LazyRoute({ route, element, key }: LazyRouteProps): ReactNode {
 }
 
 const lazyRoutes: LazyRouteProps[] = [
-  { route: RoutesEnum.LIMIT_ORDER, element: <LimitOrderPage /> },
   { route: RoutesEnum.YIELD, element: <YieldPage /> },
   { route: RoutesEnum.LONG_LIMIT_ORDER, element: <RedirectToPath path={'/limit'} /> },
-  { route: RoutesEnum.ADVANCED_ORDERS, element: <AdvancedOrdersPage /> },
   { route: RoutesEnum.LONG_ADVANCED_ORDERS, element: <RedirectToPath path={'/advanced'} /> },
   { route: RoutesEnum.ABOUT, element: <ExternalRedirect url={COWDAO_COWSWAP_ABOUT_LINK} /> },
   { route: RoutesEnum.FAQ, element: <ExternalRedirect url={COWDAO_KNOWLEDGE_BASE_LINK} /> },
@@ -99,6 +97,8 @@ export function RoutesApp(): ReactNode {
 
       {/*Swap*/}
       <Route path={RoutesEnum.SWAP} element={<SwapPage />} />
+      <Route path={RoutesEnum.LIMIT_ORDER} element={<LimitOrderPage />} />
+      <Route path={RoutesEnum.ADVANCED_ORDERS} element={<AdvancedOrdersPage />} />
       <Route path={RoutesEnum.HOOKS} element={<HooksPage />} />
       <Route path={RoutesEnum.SEND} element={<RedirectPathToSwapOnly />} />
 

apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx

@@ -1,10 +1,11 @@
 import { useAtomValue } from 'jotai'
-import { ReactNode } from 'react'
+import { ReactNode, Suspense } from 'react'
 
 import { PAGE_TITLES } from '@cowprotocol/common-const'
 
 import { useLingui } from '@lingui/react/macro'
 
+import { Loading } from 'legacy/components/FlashingLoading'
 import { OrderStatus } from 'legacy/state/orders/actions'
 
 import {
@@ -80,12 +81,14 @@ export default function AdvancedOrdersPage(): ReactNode {
 
         {!hideOrdersTable && (
           <styledEl.SecondaryWrapper>
-            <OrdersTableWidget
-              isTwapTable
-              displayOrdersOnlyForSafeApp
-              orderType={TabOrderTypes.ADVANCED}
-              orders={allEmulatedOrders}
-            />
+            <Suspense fallback={<Loading />}>
+              <OrdersTableWidget
+                isTwapTable
+                displayOrdersOnlyForSafeApp
+                orderType={TabOrderTypes.ADVANCED}
+                orders={allEmulatedOrders}
+              />
+            </Suspense>
           </styledEl.SecondaryWrapper>
         )}
       </styledEl.PageWrapper>

apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx

@@ -1,9 +1,10 @@
 import { useAtomValue } from 'jotai'
-import { ReactNode, useMemo } from 'react'
+import { ReactNode, Suspense, useMemo } from 'react'
 
 import { UiOrderType } from '@cowprotocol/types'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
+import { Loading } from 'legacy/components/FlashingLoading'
 import { OrderStatus } from 'legacy/state/orders/actions'
 import { useOrders } from 'legacy/state/orders/hooks'
 
@@ -39,7 +40,9 @@ export function RegularLimitOrders(): ReactNode {
       {!hideOrdersTable && (
         <styledEl.SecondaryWrapper>
           {pendingLimitOrders.length > 0 && <LimitOrdersPermitUpdater orders={pendingLimitOrders} />}
-          <OrdersTableWidget orderType={TabOrderTypes.LIMIT} orders={allLimitOrders} />
+          <Suspense fallback={<Loading />}>
+            <OrdersTableWidget orderType={TabOrderTypes.LIMIT} orders={allLimitOrders} />
+          </Suspense>
         </styledEl.SecondaryWrapper>
       )}
     </styledEl.PageWrapper>