On a new training job, or when editing one, load everything before allowing editing

ui/src/app/jobs/new/SimpleJob.tsx

@@ -30,6 +30,7 @@ type Props = {
   setGpuIDs: (value: string | null) => void;
   gpuList: any;
   datasetOptions: any;
+  isLoading?: boolean;
 };
 
 const isDev = process.env.NODE_ENV === 'development';
@@ -44,6 +45,7 @@ export default function SimpleJob({
   setGpuIDs,
   gpuList,
   datasetOptions,
+  isLoading,
 }: Props) {
   const modelArch = useMemo(() => {
     return modelArchs.find(a => a.name === jobConfig.config.process[0].model.arch) as ModelArch;
@@ -146,7 +148,15 @@ export default function SimpleJob({
 
   return (
     <>
-      <form onSubmit={handleSubmit} className="space-y-8">
+      <form onSubmit={handleSubmit} className={`space-y-8 relative ${isLoading ? 'pointer-events-none opacity-50' : ''}`}>
+        {isLoading && (
+          <div className="absolute inset-0 z-50 flex items-center justify-center">
+            <div className="flex flex-col items-center gap-3">
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-400 border-t-blue-500" />
+              <span className="text-sm text-gray-400">Loading...</span>
+            </div>
+          </div>
+        )}
         <div className={topBarClass}>
           <Card title="Job">
             <TextInput

ui/src/app/jobs/new/page.tsx

@@ -314,6 +314,7 @@ export default function TrainingForm() {
               setGpuIDs={setGpuIDs}
               gpuList={gpuList}
               datasetOptions={datasetOptions}
+              isLoading={!isSettingsLoaded || !isGPUInfoLoaded || datasetFetchStatus !== 'success'}
             />
           </ErrorBoundary>