queue ws messages received before job is fetched

awx/ui/src/screens/Job/useWsJob.js

@@ -4,6 +4,7 @@ import { getJobModel } from 'util/jobs';
 
 export default function useWsJob(initialJob) {
   const [job, setJob] = useState(initialJob);
+  const [pendingMessages, setPendingMessages] = useState([]);
   const lastMessage = useWebsocket({
     jobs: ['status_changed'],
     control: ['limit_reached_1'],
@@ -13,30 +14,48 @@ export default function useWsJob(initialJob) {
     setJob(initialJob);
   }, [initialJob]);
 
+  const processMessage = (message) => {
+    if (message.unified_job_id !== job.id) {
+      return;
+    }
+
+    if (
+      ['successful', 'failed', 'error', 'cancelled'].includes(message.status)
+    ) {
+      fetchJob();
+    }
+    setJob(updateJob(job, message));
+  };
+
+  async function fetchJob() {
+    const { data } = await getJobModel(job.type).readDetail(job.id);
+    setJob(data);
+  }
+
   useEffect(
     () => {
-      async function fetchJob() {
+      if (!lastMessage) {
-        const { data } = await getJobModel(job.type).readDetail(job.id);
-        setJob(data);
-      }
-
-      if (!job || lastMessage?.unified_job_id !== job.id) {
         return;
       }
-
+      if (job) {
-      if (
+        processMessage(lastMessage);
-        ['successful', 'failed', 'error', 'cancelled'].includes(
+      } else if (lastMessage.unified_job_id) {
-          lastMessage.status
+        setPendingMessages(pendingMessages.concat(lastMessage));
-        )
-      ) {
-        fetchJob();
-      } else {
-        setJob(updateJob(job, lastMessage));
       }
     },
     [lastMessage] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
+  useEffect(() => {
+    if (!job || !pendingMessages.length) {
+      return;
+    }
+    pendingMessages.forEach((message) => {
+      processMessage(message);
+    });
+    setPendingMessages([]);
+  }, [job, pendingMessages]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return job;
 }