loading resource data state

cyclops-ui/src/components/k8s-resources/ClusterRole.tsx

@@ -1,5 +1,5 @@
+import { Col, Divider, Row, Alert, Table, Tag, Spin } from "antd";
 import React, { useCallback, useEffect, useState } from "react";
-import { Col, Divider, Row, Alert, Table, Tag } from "antd";
 import { mapResponseError } from "../../utils/api/errors";
 import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
 
@@ -19,6 +19,7 @@ interface ClusterRoleData {
 }
 
 const ClusterRole = ({ name }: Props) => {
+  const [loading, setLoading] = useState(true);
   const { fetchResource } = useResourceListActions();
 
   const [clusterRole, setClusterRole] = useState<ClusterRoleData>({
@@ -36,9 +37,11 @@ const ClusterRole = ({ name }: Props) => {
         setClusterRole({
           rules: res.rules || [],
         });
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
   }, [name, fetchResource]);
 
@@ -113,6 +116,8 @@ const ClusterRole = ({ name }: Props) => {
     });
   }
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (

cyclops-ui/src/components/k8s-resources/ConfigMap.tsx

@@ -1,5 +1,5 @@
+import { Divider, Row, Alert, Descriptions, Spin } from "antd";
 import React, { useCallback, useEffect, useState } from "react";
-import { Divider, Row, Alert, Descriptions } from "antd";
 import ReactAce from "react-ace";
 import { mapResponseError } from "../../utils/api/errors";
 import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
@@ -12,6 +12,8 @@ interface Props {
 const ConfigMap = ({ name, namespace }: Props) => {
   const { fetchResource } = useResourceListActions();
 
+  const [loading, setLoading] = useState(true);
+
   const [configMap, setConfigMap] = useState({});
   const [error, setError] = useState({
     message: "",
@@ -22,9 +24,11 @@ const ConfigMap = ({ name, namespace }: Props) => {
     fetchResource("", "v1", "ConfigMap", namespace, name)()
       .then((res) => {
         setConfigMap(res);
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
   }, [name, namespace, fetchResource]);
 
@@ -96,6 +100,8 @@ const ConfigMap = ({ name, namespace }: Props) => {
     }
   };
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (

cyclops-ui/src/components/k8s-resources/CronJob.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Col, Divider, Row, Alert } from "antd";
+import { Col, Divider, Row, Alert, Spin } from "antd";
 import { mapResponseError } from "../../utils/api/errors";
 import PodTable from "./common/PodTable/PodTable";
 import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
@@ -12,6 +12,8 @@ interface Props {
 const CronJob = ({ name, namespace }: Props) => {
   const { fetchResource } = useResourceListActions();
 
+  const [loading, setLoading] = useState(true);
+
   const [cronjob, setCronjob] = useState({
     status: "",
     pods: [],
@@ -26,9 +28,11 @@ const CronJob = ({ name, namespace }: Props) => {
     fetchResource("batch", "v1", "CronJob", namespace, name)()
       .then((res) => {
         setCronjob(res);
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
   }, [name, namespace, fetchResource]);
 
@@ -40,6 +44,8 @@ const CronJob = ({ name, namespace }: Props) => {
     };
   }, [fetchCronJob]);
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (

cyclops-ui/src/components/k8s-resources/DaemonSet.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Col, Divider, Row, Alert } from "antd";
+import { Col, Divider, Row, Alert, Spin } from "antd";
 import { mapResponseError } from "../../utils/api/errors";
 import PodTable from "./common/PodTable/PodTable";
 import { isStreamingEnabled } from "../../utils/api/common";
@@ -14,6 +14,8 @@ interface Props {
 const DaemonSet = ({ name, namespace, workload }: Props) => {
   const { fetchResource, streamingDisabled } = useResourceListActions();
 
+  const [loading, setLoading] = useState(true);
+
   const [daemonSet, setDaemonSet] = useState({
     status: "",
     pods: [],
@@ -28,9 +30,11 @@ const DaemonSet = ({ name, namespace, workload }: Props) => {
     fetchResource("apps", "v1", "DaemonSet", namespace, name)()
       .then((res) => {
         setDaemonSet(res);
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
   }, [name, namespace, fetchResource]);
 
@@ -65,6 +69,8 @@ const DaemonSet = ({ name, namespace, workload }: Props) => {
     return 0;
   }
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (

cyclops-ui/src/components/k8s-resources/Deployment.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Col, Divider, Row, Alert } from "antd";
+import { Col, Divider, Row, Alert, Spin } from "antd";
 import { mapResponseError } from "../../utils/api/errors";
 import PodTable from "./common/PodTable/PodTable";
 import { isStreamingEnabled } from "../../utils/api/common";
@@ -14,6 +14,8 @@ interface Props {
 const Deployment = ({ name, namespace, workload }: Props) => {
   const { fetchResource, streamingDisabled } = useResourceListActions();
 
+  const [loading, setLoading] = useState(true);
+
   const [deployment, setDeployment] = useState({
     status: "",
     pods: [],
@@ -27,9 +29,11 @@ const Deployment = ({ name, namespace, workload }: Props) => {
     fetchResource("apps", "v1", "Deployment", namespace, name)()
       .then((res) => {
         setDeployment(res);
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
   }, [name, namespace, fetchResource]);
 
@@ -64,6 +68,8 @@ const Deployment = ({ name, namespace, workload }: Props) => {
     return 0;
   }
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (

cyclops-ui/src/components/k8s-resources/Job.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Col, Divider, Row, Alert } from "antd";
+import { Col, Divider, Row, Alert, Spin } from "antd";
 import { mapResponseError } from "../../utils/api/errors";
 import PodTable from "./common/PodTable/PodTable";
 import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
@@ -12,6 +12,7 @@ interface Props {
 const Job = ({ name, namespace }: Props) => {
   const { fetchResource } = useResourceListActions();
 
+  const [loading, setLoading] = useState(true);
   const [job, setJob] = useState({
     status: "",
     pods: [],
@@ -26,9 +27,11 @@ const Job = ({ name, namespace }: Props) => {
     fetchResource("batch", "v1", "Job", namespace, name)()
       .then((res) => {
         setJob(res);
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
   }, [name, namespace, fetchResource]);
 
@@ -40,6 +43,8 @@ const Job = ({ name, namespace }: Props) => {
     };
   }, [fetchJob]);
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (

cyclops-ui/src/components/k8s-resources/PersistentVolumeClaim.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { mapResponseError } from "../../utils/api/errors";
-import { Alert, Descriptions, Divider } from "antd";
+import { Alert, Descriptions, Divider, Spin } from "antd";
 import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
 
 interface Props {
@@ -16,6 +16,7 @@ interface pvc {
 const PersistentVolumeClaim = ({ name, namespace }: Props) => {
   const { fetchResource } = useResourceListActions();
 
+  const [loading, setLoading] = useState(true);
   const [pvc, setPvc] = useState<pvc>({
     size: "",
     accessModes: "",
@@ -32,9 +33,11 @@ const PersistentVolumeClaim = ({ name, namespace }: Props) => {
           size: res.size,
           accessModes: res.accessmodes.join(","),
         });
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
   }, [name, namespace, fetchResource]);
 
@@ -46,6 +49,8 @@ const PersistentVolumeClaim = ({ name, namespace }: Props) => {
     };
   }, [fetchPersistentVolumeClaim]);
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (

cyclops-ui/src/components/k8s-resources/Pod.tsx

@@ -10,6 +10,7 @@ import {
   Tabs,
   Modal,
   TabsProps,
+  Spin,
 } from "antd";
 import ReactAce from "react-ace";
 import { formatPodAge } from "../../utils/pods";
@@ -54,6 +55,7 @@ const Pod = ({ name, namespace }: Props) => {
   } = useResourceListActions();
   const logsSignalControllerRef = useRef<AbortController | null>(null);
 
+  const [loading, setLoading] = useState(true);
   const [pod, setPod] = useState<pod>({
     status: "",
     containers: [],
@@ -77,9 +79,11 @@ const Pod = ({ name, namespace }: Props) => {
     fetchResource("", "v1", "Pod", namespace, name)()
       .then((res) => {
         setPod(res);
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
   }, [name, namespace, fetchResource]);
 
@@ -237,6 +241,8 @@ const Pod = ({ name, namespace }: Props) => {
     }
   };
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (

cyclops-ui/src/components/k8s-resources/Secret.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { mapResponseError } from "../../utils/api/errors";
-import { Alert, Descriptions, Divider } from "antd";
+import { Alert, Descriptions, Divider, Spin } from "antd";
 import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
 
 interface Props {
@@ -16,6 +16,7 @@ interface secret {
 const Secret = ({ name, namespace }: Props) => {
   const { fetchResource } = useResourceListActions();
 
+  const [loading, setLoading] = useState(true);
   const [secret, setSecret] = useState<secret>({
     type: "",
     dataKeys: [],
@@ -32,9 +33,11 @@ const Secret = ({ name, namespace }: Props) => {
           type: res.type,
           dataKeys: res.dataKeys,
         });
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
   }, [name, namespace, fetchResource]);
 
@@ -46,6 +49,8 @@ const Secret = ({ name, namespace }: Props) => {
     };
   }, [fetchSecret]);
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (

cyclops-ui/src/components/k8s-resources/Service.tsx

@@ -1,5 +1,14 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Col, Divider, Row, Table, Alert, Descriptions, Button } from "antd";
+import {
+  Col,
+  Divider,
+  Row,
+  Table,
+  Alert,
+  Descriptions,
+  Button,
+  Spin,
+} from "antd";
 import { mapResponseError } from "../../utils/api/errors";
 import { CopyOutlined } from "@ant-design/icons";
 import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
@@ -30,6 +39,7 @@ interface service {
 const Service = ({ name, namespace }: Props) => {
   const { fetchResource } = useResourceListActions();
 
+  const [loading, setLoading] = useState(true);
   const [service, setService] = useState<service>({
     externalIPs: [],
     ports: [],
@@ -44,9 +54,11 @@ const Service = ({ name, namespace }: Props) => {
     fetchResource("", "v1", "Service", namespace, name)()
       .then((res) => {
         setService(res);
+        setLoading(false);
       })
       .catch((error) => {
         setError(mapResponseError(error));
+        setLoading(false);
       });
   }, [name, namespace, fetchResource]);
 
@@ -163,6 +175,8 @@ const Service = ({ name, namespace }: Props) => {
     );
   };
 
+  if (loading) return <Spin size="large" style={{ marginTop: "20px" }} />;
+
   return (
     <div>
       {error.message.length !== 0 && (