@ammarkhalidfarooq/dashboard-package 0.6.4 → 0.6.5

package/dist/index.cjs.js

@@ -876,7 +876,9 @@ var Dashboard = function Dashboard(_ref) {
     _ref$dateName = _ref.dateName,
     dateName = _ref$dateName === void 0 ? "Last Period" : _ref$dateName,
     _ref$exportTrigger = _ref.exportTrigger,
-    exportTrigger = _ref$exportTrigger === void 0 ? 0 : _ref$exportTrigger;
+    exportTrigger = _ref$exportTrigger === void 0 ? 0 : _ref$exportTrigger,
+    _ref$apiLoading = _ref.apiLoading,
+    apiLoading = _ref$apiLoading === void 0 ? false : _ref$apiLoading;
   return /*#__PURE__*/jsxRuntime.jsx(material.ThemeProvider, {
     theme: theme,
     children: /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
@@ -891,7 +893,8 @@ var Dashboard = function Dashboard(_ref) {
         apiData: apiData,
         activeSection: overviewType,
         dateName: dateName,
-        exportTrigger: exportTrigger
+        exportTrigger: exportTrigger,
+        apiLoading: apiLoading
       })
     })
   });
@@ -4225,7 +4228,7 @@ var CARD_SX = {
   maxHeight: 280
 };
 var GRID_GAP = "6px";
-var fourColGridSx = function fourColGridSx(exportMode) {
+var fourColGridSx$1 = function fourColGridSx(exportMode) {
   return {
     display: "grid",
     gridTemplateColumns: exportMode ? "repeat(4, 1fr)" : {
@@ -4460,19 +4463,19 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
     children: campaignsRow
   });
   if (section === "middle") return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-    sx: fourColGridSx(exportMode),
+    sx: fourColGridSx$1(exportMode),
     children: middleCards
   });
   if (section === "bottom") return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-    sx: fourColGridSx(exportMode),
+    sx: fourColGridSx$1(exportMode),
     children: bottomCards
   });
   return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
     children: [campaignsRow, /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-      sx: fourColGridSx(exportMode),
+      sx: fourColGridSx$1(exportMode),
       children: middleCards
     }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-      sx: fourColGridSx(exportMode),
+      sx: fourColGridSx$1(exportMode),
       children: bottomCards
     })]
   });
@@ -4785,7 +4788,9 @@ var NewOverview = function NewOverview(_ref) {
     _ref$dateName = _ref.dateName,
     dateName = _ref$dateName === void 0 ? "Last Period" : _ref$dateName,
     _ref$exportTrigger = _ref.exportTrigger,
-    exportTrigger = _ref$exportTrigger === void 0 ? 0 : _ref$exportTrigger;
+    exportTrigger = _ref$exportTrigger === void 0 ? 0 : _ref$exportTrigger,
+    _ref$apiLoading = _ref.apiLoading,
+    apiLoading = _ref$apiLoading === void 0 ? false : _ref$apiLoading;
   var initialMetric = "Revenue";
   var revenueData = (apiData === null || apiData === void 0 ? void 0 : apiData.revenueData) || [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000];
   var donationsData = (apiData === null || apiData === void 0 ? void 0 : apiData.donationsData) || [15, 22, 18, 30, 25, 35, 42, 45, 28];
@@ -4948,7 +4953,7 @@ var NewOverview = function NewOverview(_ref) {
   var primaryCharts = [{
     label: "Total Raised",
     value: totalRevData.length > 0 ? "$".concat(totalRevTotal.toLocaleString()) : typeof (apiData === null || apiData === void 0 ? void 0 : apiData.totalRevenue) === "string" ? apiData.totalRevenue : "$9,200.00",
-    subValue: "Total Donations: ".concat((apiData === null || apiData === void 0 ? void 0 : apiData.totalDonations) || 215),
+    subValue: "Total Donations: ".concat((apiData === null || apiData === void 0 ? void 0 : apiData.totalDonations) || 0),
     data: totalRevValues,
     categories: totalRevCategories,
     showSelector: true
@@ -5053,20 +5058,24 @@ var NewOverview = function NewOverview(_ref) {
         secondaryCharts: secondaryCharts,
         tertiaryCharts: tertiaryCharts,
         quaternaryCharts: quaternaryCharts,
-        dateName: dateName
+        dateName: dateName,
+        apiLoading: apiLoading
       }), activeSection === "Paid" && /*#__PURE__*/jsxRuntime.jsx(PaidSection$2, {
-        apiData: apiData
+        apiData: apiData,
+        apiLoading: apiLoading
       }), activeSection === "Organic" && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {},
         children: /*#__PURE__*/jsxRuntime.jsx(OrganicSection$2, {
           apiData: apiData,
-          dateName: dateName
+          dateName: dateName,
+          apiLoading: apiLoading
         })
       }), activeSection === "Email" && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {},
         children: /*#__PURE__*/jsxRuntime.jsx(EmailSection$2, {
           apiData: apiData,
-          dateName: dateName
+          dateName: dateName,
+          apiLoading: apiLoading
         })
       })]
     }), showExportLayout && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -14520,6 +14529,605 @@ var html2canvas_esm = /*#__PURE__*/Object.freeze({
   default: html2canvas
 });
 
+var CARD_BORDER = "1.5px solid #F1F1F5";
+var PANEL_BORDER = "1px solid #f0f0f0";
+var PANEL_SHADOW = "0 4px 24px rgba(0,0,0,0.06)";
+var MetricCardSkeleton = function MetricCardSkeleton() {
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    sx: {
+      bgcolor: "#fff",
+      borderRadius: "16px",
+      border: CARD_BORDER,
+      p: {
+        xs: 1.75,
+        md: 2
+      },
+      height: 92,
+      boxShadow: "0 14px 30px rgba(21, 26, 45, 0.06)"
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        mb: 1
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+        variant: "text",
+        width: "55%",
+        height: 18
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+        variant: "circular",
+        width: 30,
+        height: 30
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "text",
+      width: "70%",
+      height: 28,
+      sx: {
+        mb: 0.5
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "text",
+      width: "45%",
+      height: 14
+    })]
+  });
+};
+var MetricCardsSkeleton = function MetricCardsSkeleton(_ref) {
+  var _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 6 : _ref$count,
+    _ref$gridTemplateColu = _ref.gridTemplateColumns,
+    gridTemplateColumns = _ref$gridTemplateColu === void 0 ? {
+      xs: "1fr 1fr",
+      sm: "1fr 1fr",
+      md: "1fr 1fr 1fr",
+      lg: "repeat(6, 1fr)"
+    } : _ref$gridTemplateColu,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? "6px" : _ref$gap;
+  return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+    sx: {
+      display: "grid",
+      gridTemplateColumns: gridTemplateColumns,
+      gap: gap,
+      mb: 0
+    },
+    children: Array.from({
+      length: count
+    }).map(function (_, index) {
+      return /*#__PURE__*/jsxRuntime.jsx(MetricCardSkeleton, {}, index);
+    })
+  });
+};
+var ChartCardSkeleton = function ChartCardSkeleton(_ref2) {
+  var _ref2$height = _ref2.height,
+    height = _ref2$height === void 0 ? 380 : _ref2$height;
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    sx: {
+      bgcolor: "#fff",
+      borderRadius: 4,
+      border: PANEL_BORDER,
+      boxShadow: PANEL_SHADOW,
+      p: 3,
+      height: height
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "text",
+      width: 180,
+      height: 26,
+      sx: {
+        mb: 0.5
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "text",
+      width: 120,
+      height: 16,
+      sx: {
+        mb: 1
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "text",
+      width: 140,
+      height: 36,
+      sx: {
+        mb: 2
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "rounded",
+      width: "100%",
+      height: height - 120
+    })]
+  });
+};
+var PanelCardSkeleton = function PanelCardSkeleton(_ref3) {
+  var _ref3$height = _ref3.height,
+    height = _ref3$height === void 0 ? 280 : _ref3$height,
+    _ref3$sx = _ref3.sx,
+    sx = _ref3$sx === void 0 ? {} : _ref3$sx;
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    sx: _objectSpread2({
+      bgcolor: "#fff",
+      borderRadius: 4,
+      border: PANEL_BORDER,
+      boxShadow: PANEL_SHADOW,
+      p: 3,
+      height: height
+    }, sx),
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "text",
+      width: "50%",
+      height: 24,
+      sx: {
+        mb: 0.5
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "text",
+      width: "35%",
+      height: 16,
+      sx: {
+        mb: 2.5
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "rounded",
+      width: "100%",
+      height: height - 90
+    })]
+  });
+};
+var TableCardSkeleton = function TableCardSkeleton(_ref4) {
+  var _ref4$height = _ref4.height,
+    height = _ref4$height === void 0 ? 430 : _ref4$height,
+    _ref4$rowCount = _ref4.rowCount,
+    rowCount = _ref4$rowCount === void 0 ? 5 : _ref4$rowCount;
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    sx: {
+      bgcolor: "#fff",
+      borderRadius: 4,
+      border: PANEL_BORDER,
+      boxShadow: PANEL_SHADOW,
+      p: 3,
+      height: height
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "text",
+      width: "40%",
+      height: 24,
+      sx: {
+        mb: 0.5
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "text",
+      width: "30%",
+      height: 16,
+      sx: {
+        mb: 2.5
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "text",
+      width: "100%",
+      height: 20,
+      sx: {
+        mb: 1.5
+      }
+    }), Array.from({
+      length: rowCount
+    }).map(function (_, index) {
+      return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          display: "flex",
+          gap: 2,
+          mb: 1.5,
+          alignItems: "center"
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+          variant: "circular",
+          width: 36,
+          height: 36
+        }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+          variant: "text",
+          width: "25%",
+          height: 20
+        }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+          variant: "text",
+          width: "15%",
+          height: 20
+        }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+          variant: "rounded",
+          width: "20%",
+          height: 8,
+          sx: {
+            flex: 1
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+          variant: "text",
+          width: "10%",
+          height: 20
+        }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+          variant: "text",
+          width: "12%",
+          height: 20
+        })]
+      }, index);
+    })]
+  });
+};
+var DonutCardSkeleton = function DonutCardSkeleton(_ref5) {
+  var _ref5$height = _ref5.height,
+    height = _ref5$height === void 0 ? 430 : _ref5$height;
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    sx: {
+      bgcolor: "#fff",
+      borderRadius: 4,
+      border: PANEL_BORDER,
+      boxShadow: PANEL_SHADOW,
+      p: 3,
+      height: height,
+      display: "flex",
+      flexDirection: "column"
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "text",
+      width: "45%",
+      height: 24,
+      sx: {
+        mb: 0.5
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+      variant: "text",
+      width: "35%",
+      height: 16,
+      sx: {
+        mb: 2
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        display: "flex",
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 4
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+        variant: "circular",
+        width: 160,
+        height: 160
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        sx: {
+          flex: 1
+        },
+        children: Array.from({
+          length: 4
+        }).map(function (_, index) {
+          return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              mb: 1.5
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+              variant: "circular",
+              width: 10,
+              height: 10
+            }), /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
+              variant: "text",
+              width: "60%",
+              height: 18
+            })]
+          }, index);
+        })
+      })]
+    })]
+  });
+};
+var fourColGridSx = {
+  display: "grid",
+  gridTemplateColumns: {
+    xs: "1fr",
+    sm: "repeat(2, 1fr)",
+    md: "repeat(2, 1fr)",
+    xl: "repeat(4, 1fr)"
+  },
+  gap: "6px",
+  mt: "6px",
+  alignItems: "stretch"
+};
+var OverallSectionSkeleton = function OverallSectionSkeleton() {
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(MetricCardsSkeleton, {
+      count: 6
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mb: 0,
+        mt: "6px"
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        sx: {
+          paddingTop: "0px !important"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(ChartCardSkeleton, {
+          height: 400
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        mt: "6px"
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+        container: true,
+        spacing: "6px",
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+          item: true,
+          xs: 12,
+          md: 9,
+          sx: {
+            paddingTop: "0px !important"
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(TableCardSkeleton, {
+            height: 320,
+            rowCount: 4
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+          item: true,
+          xs: 12,
+          md: 3,
+          sx: {
+            paddingTop: "0px !important"
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(DonutCardSkeleton, {
+            height: 320
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        sx: fourColGridSx,
+        children: Array.from({
+          length: 4
+        }).map(function (_, index) {
+          return /*#__PURE__*/jsxRuntime.jsx(PanelCardSkeleton, {
+            height: 280
+          }, index);
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        sx: fourColGridSx,
+        children: Array.from({
+          length: 4
+        }).map(function (_, index) {
+          return /*#__PURE__*/jsxRuntime.jsx(PanelCardSkeleton, {
+            height: 280
+          }, index);
+        })
+      })]
+    })]
+  });
+};
+var PaidSectionSkeleton = function PaidSectionSkeleton() {
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(MetricCardsSkeleton, {
+      count: 6,
+      gridTemplateColumns: {
+        xs: "1fr",
+        sm: "1fr 1fr",
+        md: "1fr 1fr 1fr",
+        lg: "repeat(6, 1fr)"
+      },
+      gap: 2
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 2.75
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        sx: {
+          paddingTop: "0px !important"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(ChartCardSkeleton, {
+          height: 400
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 2.25
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 6,
+        sx: {
+          paddingTop: "0px !important",
+          minHeight: 430
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(TableCardSkeleton, {})
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 6,
+        sx: {
+          paddingTop: "0px !important",
+          minHeight: 430
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(DonutCardSkeleton, {})
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 2.25
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 6,
+        sx: {
+          paddingTop: "0px !important"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(TableCardSkeleton, {
+          height: 360,
+          rowCount: 4
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 6,
+        sx: {
+          paddingTop: "0px !important"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(PanelCardSkeleton, {
+          height: 360
+        })
+      })]
+    })]
+  });
+};
+var OrganicSectionSkeleton = function OrganicSectionSkeleton() {
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(MetricCardsSkeleton, {
+      count: 6
+    }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: "6px"
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        sx: {
+          paddingTop: "0px !important"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(ChartCardSkeleton, {
+          height: 400
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 6,
+        sx: {
+          mt: "6px",
+          paddingTop: "0px !important"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(TableCardSkeleton, {
+          height: 360,
+          rowCount: 5
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 6,
+        sx: {
+          mt: "6px",
+          paddingTop: "0px !important"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(DonutCardSkeleton, {
+          height: 360
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 6,
+        sx: {
+          mt: "6px",
+          paddingTop: "0px !important"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(TableCardSkeleton, {
+          height: 360,
+          rowCount: 5
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 6,
+        sx: {
+          mt: "6px",
+          paddingTop: "0px !important"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(PanelCardSkeleton, {
+          height: 360
+        })
+      })]
+    })]
+  });
+};
+var EmailSectionSkeleton = function EmailSectionSkeleton() {
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(MetricCardsSkeleton, {
+      count: 10,
+      gridTemplateColumns: {
+        xs: "1fr 1fr",
+        sm: "1fr 1fr",
+        md: "1fr 1fr 1fr",
+        lg: "repeat(5, 1fr)"
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: "6px"
+      },
+      children: Array.from({
+        length: 3
+      }).map(function (_, index) {
+        return /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+          item: true,
+          xs: 12,
+          md: 4,
+          sx: {
+            paddingTop: "0px !important",
+            paddingLeft: index > 0 ? {
+              md: "6px !important"
+            } : undefined,
+            marginTop: index > 0 ? {
+              xs: "6px",
+              md: 0
+            } : undefined
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(ChartCardSkeleton, {
+            height: 280
+          })
+        }, index);
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: "6px"
+      },
+      children: Array.from({
+        length: 3
+      }).map(function (_, index) {
+        return /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+          item: true,
+          xs: 12,
+          md: 4,
+          sx: {
+            paddingTop: "0px !important",
+            paddingLeft: index > 0 ? {
+              md: "6px !important"
+            } : undefined,
+            marginTop: index > 0 ? {
+              xs: "6px",
+              md: 0
+            } : undefined
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(TableCardSkeleton, {
+            height: 300,
+            rowCount: 4
+          })
+        }, index);
+      })
+    })]
+  });
+};
+
 var OverallSection = function OverallSection(_ref) {
   var _apiData$overviewStat, _apiData$overviewStat2, _apiData$overviewStat3, _apiData$overviewStat4, _apiData$overviewStat5, _apiData$overviewStat6, _apiData$overviewStat7, _apiData$overviewStat8, _apiData$overviewStat9, _apiData$overviewStat0, _apiData$overviewStat1, _apiData$overviewStat10, _apiData$overviewStat11, _apiData$overviewStat12, _apiData$roasCard, _apiData$roasCardPrev, _apiData$overviewStat13, _apiData$overviewStat14, _apiData$overviewStat15, _apiData$overviewStat16;
   var _ref$apiData = _ref.apiData,
@@ -14528,11 +15136,16 @@ var OverallSection = function OverallSection(_ref) {
     secondaryCharts = _ref.secondaryCharts,
     tertiaryCharts = _ref.tertiaryCharts,
     quaternaryCharts = _ref.quaternaryCharts,
-    dateName = _ref.dateName;
+    dateName = _ref.dateName,
+    _ref$apiLoading = _ref.apiLoading,
+    apiLoading = _ref$apiLoading === void 0 ? false : _ref$apiLoading;
   var _useState = React.useState("Total Raised"),
     _useState2 = _slicedToArray(_useState, 2),
     activeMetric = _useState2[0],
     setActiveMetric = _useState2[1];
+  if (apiLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx(OverallSectionSkeleton, {});
+  }
   var donationTypeData = (apiData === null || apiData === void 0 ? void 0 : apiData.recurringBarChartData) || [];
   var donorGeographyData = (apiData === null || apiData === void 0 ? void 0 : apiData.donorGeography) || [];
   var trafficSourceData = (apiData === null || apiData === void 0 ? void 0 : apiData.trafficSourceData) || [];
@@ -15063,11 +15676,16 @@ var OverallSection$1 = /*#__PURE__*/Object.freeze({
   default: OverallSection
 });
 
-var PaidSection = function PaidSection() {
+var PaidSection = function PaidSection(_ref) {
+  var _ref$apiLoading = _ref.apiLoading,
+    apiLoading = _ref$apiLoading === void 0 ? false : _ref$apiLoading;
   var _useState = React.useState("Total Spent"),
     _useState2 = _slicedToArray(_useState, 2),
     activeMetric = _useState2[0],
     setActiveMetric = _useState2[1];
+  if (apiLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx(PaidSectionSkeleton, {});
+  }
   var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
   var metricInfo = {
     "Total Spent": {
@@ -15398,7 +16016,9 @@ var OrganicSection = function OrganicSection(_ref) {
   var _ref$apiData = _ref.apiData,
     apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
     _ref$dateName = _ref.dateName,
-    dateName = _ref$dateName === void 0 ? "Last Period" : _ref$dateName;
+    dateName = _ref$dateName === void 0 ? "Last Period" : _ref$dateName,
+    _ref$apiLoading = _ref.apiLoading,
+    apiLoading = _ref$apiLoading === void 0 ? false : _ref$apiLoading;
   var _useState = React.useState("Organic Users"),
     _useState2 = _slicedToArray(_useState, 2),
     activeMetric = _useState2[0],
@@ -15656,6 +16276,9 @@ var OrganicSection = function OrganicSection(_ref) {
     data: selectedInfo.data,
     categories: chartCategories
   };
+  if (apiLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx(OrganicSectionSkeleton, {});
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: {
@@ -16093,7 +16716,9 @@ var EmailSection = function EmailSection(_ref) {
   var _ref$apiData = _ref.apiData,
     apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
     _ref$dateName = _ref.dateName,
-    dateName = _ref$dateName === void 0 ? "Last Period" : _ref$dateName;
+    dateName = _ref$dateName === void 0 ? "Last Period" : _ref$dateName,
+    _ref$apiLoading = _ref.apiLoading,
+    apiLoading = _ref$apiLoading === void 0 ? false : _ref$apiLoading;
   var _useState = React.useState("Total raised"),
     _useState2 = _slicedToArray(_useState, 2),
     activeMetric = _useState2[0],
@@ -16336,6 +16961,9 @@ var EmailSection = function EmailSection(_ref) {
       } : {}
     });
   };
+  if (apiLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx(EmailSectionSkeleton, {});
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: {