Merge pull request #1570 from RoboSats/add-skeleton-while-loading-limits

Add skeleton while loading limits

Author: KoalaSat

frontend/src/basic/Routes.tsx

@@ -27,7 +27,7 @@ const Routes: React.FC = () => {
 
   return (
     <DomRoutes>
-      {['/garage/:token?', '/', ''].map((path, index) => {
+      {['/garage/:token?', '/garage', '/', ''].map((path, index) => {
         return (
           <Route
             path={path}

frontend/src/components/BookTable/index.tsx

@@ -15,6 +15,7 @@ import {
   IconButton,
   Tooltip,
   styled,
+  Skeleton,
 } from '@mui/material';
 import {
   DataGrid,
@@ -427,8 +428,8 @@ const BookTable = ({
         const currencyCode = String(currencyDict[params.row.currency.toString()]);
         const coordinator = federation.getCoordinator(params.row.coordinatorShortAlias);
         const premium = parseFloat(params.row.premium);
-        const price =
-          (coordinator.limits[params.row.currency.toString()]?.price ?? 1) * (1 + premium / 100);
+        const limitPrice = coordinator.limits[params.row.currency.toString()]?.price;
+        const price = (limitPrice ?? 1) * (1 + premium / 100);
 
         return (
           <div
@@ -437,7 +438,11 @@ const BookTable = ({
               onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
             }}
           >
-            {`${pn(Math.round(price))} ${currencyCode}/BTC`}
+            {limitPrice ? (
+              `${pn(Math.round(price))} ${currencyCode}/BTC`
+            ) : (
+              <Skeleton variant='rectangular' width={200} height={20} style={{ marginTop: 15 }} />
+            )}
           </div>
         );
       },

frontend/src/components/Charts/DepthChart/index.tsx

@@ -68,7 +68,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
   useEffect(() => {
     if (Object.values(federation.book).length > 0) {
       const enriched = Object.values(federation.book).map((order) => {
-        if (order.coordinatorShortAlias != null && order.currency) {
+        if (order && order.coordinatorShortAlias != null && order.currency) {
           const limits = federation.getCoordinator(order.coordinatorShortAlias).limits;
 
           const originalPrice =
@@ -127,12 +127,12 @@ const DepthChart: React.FC<DepthChartProps> = ({
         ? enrichedOrders.sort(
             (order1, order2) => (order1?.base_price ?? 0) - (order2?.base_price ?? 0),
           )
-        : enrichedOrders.sort((order1, order2) => order1.premium - order2.premium);
+        : enrichedOrders.sort((order1, order2) => order1?.premium - order2?.premium);
 
     const sortedBuyOrders: PublicOrder[] = sortedOrders
-      .filter((order) => order.type === 0)
+      .filter((order) => order?.type === 0)
       .reverse();
-    const sortedSellOrders: PublicOrder[] = sortedOrders.filter((order) => order.type === 1);
+    const sortedSellOrders: PublicOrder[] = sortedOrders.filter((order) => order?.type === 1);
 
     const buySerie: Datum[] = generateSerie(sortedBuyOrders);
     const sellSerie: Datum[] = generateSerie(sortedSellOrders);