implemented loading for last job status

dashboard/src/main/home/cluster-dashboard/chart/Chart.tsx

@@ -17,7 +17,7 @@ import { readableDate } from "shared/string_utils";
 type Props = {
   chart: ChartType;
   controllers: Record<string, any>;
-  jobStatus: JobStatusWithTimeType;
+  jobStatus: JobStatusWithTimeType | JobStatusType.Loading;
   isJob: boolean;
   closeChartRedirectUrl?: string;
 };
@@ -111,7 +111,12 @@ const Chart: React.FunctionComponent<Props> = ({
             margin_left={"17px"}
           />
           <LastDeployed>
-            {jobStatus?.status ? (
+            {jobStatus === JobStatusType.Loading ? (
+              <>
+                <Dot>•</Dot>
+                <JobStatus status={jobStatus}>Loading...</JobStatus>
+              </>
+            ) : typeof jobStatus !== "string" && jobStatus?.status ? (
               <>
                 <Dot>•</Dot>
                 <JobStatus status={jobStatus.status}>
@@ -278,6 +283,8 @@ const JobStatus = styled.span<{ status?: JobStatusType }>`
       ? "rgb(56, 168, 138)"
       : props.status === JobStatusType.Failed
       ? "#ff385d"
+      : props.status === JobStatusType.Loading
+      ? "#ffffff90"
       : "#aaaabb66"
   }`}
 `;

dashboard/src/main/home/cluster-dashboard/chart/ChartList.tsx

@@ -475,6 +475,13 @@ const ChartList: React.FunctionComponent<Props> = ({
     return result;
   }, [charts, sortType, jobStatus, lastRunStatus]);
 
+  const isLoadingJobStatus = useMemo(() => {
+    if (lastStreamStatus.current !== "finished") {
+      return true;
+    }
+    return false;
+  }, [jobStatus]);
+
   const renderChartList = () => {
     if (isLoading || (!namespace && namespace !== "")) {
       return (
@@ -504,11 +511,11 @@ const ChartList: React.FunctionComponent<Props> = ({
           key={getChartKey(chart.name, chart.namespace)}
           chart={chart}
           controllers={controllers || {}}
-          jobStatus={_.get(
-            jobStatus,
-            getChartKey(chart.name, chart.namespace),
-            null
-          )}
+          jobStatus={
+            isLoadingJobStatus
+              ? JobStatusType.Loading
+              : _.get(jobStatus, getChartKey(chart.name, chart.namespace), null)
+          }
           isJob={currentView === "jobs"}
           closeChartRedirectUrl={closeChartRedirectUrl}
         />

dashboard/src/shared/types.tsx

@@ -327,6 +327,7 @@ export enum JobStatusType {
   Succeeded = "succeeded",
   Running = "active",
   Failed = "failed",
+  Loading = "loading",
 }
 
 export interface JobStatusWithTimeType {