fix(striker-ui): resolve hydration issue in striker init form

striker-ui/components/StrikerInitForm.tsx

@@ -52,6 +52,7 @@ const StrikerInitForm: FC = () => {
 
   const [hostDetail, setHostDetail] = useState<APIHostDetail | undefined>();
 
+  // Make sure the fetch for host detail only happens once.
   const allowGetHostDetail = useRef<boolean>(true);
 
   const generalInitFormRef = useRef<GeneralInitFormForwardedRefContent>({});
@@ -60,6 +61,8 @@ const StrikerInitForm: FC = () => {
   const jobIconRef = useRef<IconWithIndicatorForwardedRefContent>({});
   const jobSummaryRef = useRef<JobSummaryForwardedRefContent>({});
 
+  const [panelTitle, setPanelTitle] = useState<string>('Loading...');
+
   const reconfig = useMemo<boolean>(() => Boolean(re), [re]);
 
   const buildSubmitSection = useMemo(
@@ -88,43 +91,36 @@ const StrikerInitForm: FC = () => {
     [isDisableSubmit, isSubmittingForm],
   );
 
-  const panelTitle = useMemo(() => {
-    let title = 'Loading...';
-
-    if (isReady) {
-      title = reconfig
-        ? `Reconfigure ${hostDetail?.shortHostName ?? 'striker'}`
-        : 'Initialize striker';
-    }
-
-    return title;
-  }, [hostDetail?.shortHostName, isReady, reconfig]);
-
   const toggleSubmitDisabled = useCallback((...testResults: boolean[]) => {
     setIsDisableSubmit(!testResults.every((testResult) => testResult));
   }, []);
 
   useEffect(() => {
-    if (isReady) {
+    if (!isReady) return;
-      if (reconfig && allowGetHostDetail.current) {
+
+    if (!reconfig) {
+      setPanelTitle('Initialize striker');
+
+      return;
+    }
+
+    if (!allowGetHostDetail.current) return;
+
     allowGetHostDetail.current = false;
 
     api
       .get<APIHostDetail>('/host/local')
       .then(({ data }) => {
         setHostDetail(data);
+        setPanelTitle(`Reconfigure ${data.shortHostName}`);
       })
       .catch((error) => {
         const emsg = handleAPIError(error);
 
-            emsg.children = (
+        emsg.children = <>Failed to get host detail data. {emsg.children}</>;
-              <>Failed to get host detail data. {emsg.children}</>
-            );
 
         setSubmitMessage(emsg);
       });
-      }
-    }
   }, [isReady, reconfig, setHostDetail]);
 
   return (