feat(LineChart): add loading state to display spinner while loading data

src/components/Charts/LineChart.jsx

@@ -5,7 +5,8 @@ import PropTypes from "prop-types";
 const LineChart = ({
     seriesData = [],
     categories = [],
-    colors = ["#1E90FF", "#FF6347"], // default: Dodger Blue & Tomato
+    colors = ["#1E90FF", "#FF6347"],
+    loading = false
 }) => {
     const hasValidData =
         Array.isArray(seriesData) &&
@@ -13,6 +14,15 @@ const LineChart = ({
         Array.isArray(categories) &&
         categories.length > 0;
 
+    if (loading) {
+        return (
+            <div className="flex justify-center items-center h-[350px] text-gray-500">
+                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mr-2" />
+                Loading chart...
+            </div>
+        );
+    }
+
     if (!hasValidData) {
         return <div className="text-center text-gray-500">No data to display</div>;
     }
@@ -105,7 +115,8 @@ LineChart.propTypes = {
     ),
     categories: PropTypes.arrayOf(PropTypes.string),
     colors: PropTypes.arrayOf(PropTypes.string),
-    title: PropTypes.string
+    title: PropTypes.string,
+    loading: PropTypes.bool
 };
 
 export default LineChart;