Feature/7 add indication of auto refresh on job details page (#175)

* Created Loading spinner component

* Add loading spinner on job status on details page

* Changed LoadingSpinner component to remove unnecessary  div

Author: eli-litzelman

ui/src/features/jobs-list/JobDetail.tsx

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from "react";
+import LoadingSpinner from "../../shared/components/LoadingSpinner";
 import { JobDetails } from "./useJobDetails";
 
 const jobFields: (keyof JobDetails)[] = [
@@ -33,7 +34,18 @@ function JobDetail({ job }: JobDetailProps) {
             : "col-span-1";
           return (
             <JobDetailField key={field} field={field} className={className}>
-              {job[field]}
+              {field === "jobStatus" ? (
+                job.jobStatus !== "Completed" && job.jobStatus !== "Failed" ? (
+                  <span className="inline-flex items-center gap-2">
+                    <span>{job.jobStatus}</span>
+                    <LoadingSpinner />
+                  </span>
+                ) : (
+                  job.jobStatus
+                )
+              ) : (
+                job[field]
+              )}
             </JobDetailField>
           );
         })}
@@ -57,4 +69,4 @@ const JobDetailField = ({
   </span>
 );
 
-export default JobDetail;
+export default JobDetail;

ui/src/shared/components/LoadingSpinner.tsx

@@ -0,0 +1,7 @@
+import { AiOutlineLoading } from "react-icons/ai";
+
+const LoadingSpinner = () => (
+    <AiOutlineLoading className="animate-spin text-xl" />
+);
+
+export default LoadingSpinner;