Fix: add loading for dataset creation (#1214)

web/app/components/datasets/create/step-two/index.tsx

@@ -107,6 +107,7 @@ const StepTwo = ({
   const fileIndexingEstimate = (() => {
     return segmentationType === SegmentType.AUTO ? automaticFileIndexingEstimate : customFileIndexingEstimate
   })()
+  const [isCreating, setIsCreating] = useState(false)
 
   const scrollHandle = (e: Event) => {
     if ((e.target as HTMLDivElement).scrollTop > 0)
@@ -277,7 +278,7 @@ const StepTwo = ({
       } as CreateDocumentReq
       if (dataSourceType === DataSourceType.FILE) {
         params.data_source.info_list.file_info_list = {
-          file_ids: files.map(file => file.id),
+          file_ids: files.map(file => file.id || '').filter(Boolean),
         }
       }
       if (dataSourceType === DataSourceType.NOTION)
@@ -321,6 +322,7 @@ const StepTwo = ({
     try {
       let res
       const params = getCreationParams()
+      setIsCreating(true)
       if (!datasetId) {
         res = await createFirstDocument({
           body: params,
@@ -347,6 +349,9 @@ const StepTwo = ({
         message: `${err}`,
       })
     }
+    finally {
+      setIsCreating(false)
+    }
   }
 
   const handleSwitch = (state: boolean) => {
@@ -622,7 +627,7 @@ const StepTwo = ({
                   <>
                     <div className='mb-2 text-xs font-medium text-gray-500'>{t('datasetCreation.stepTwo.fileSource')}</div>
                     <div className='flex items-center text-sm leading-6 font-medium text-gray-800'>
-                      <span className={cn(s.fileIcon, files.length && s[files[0].extension])} />
+                      <span className={cn(s.fileIcon, files.length && s[files[0].extension || ''])} />
                       {getFileName(files[0].name || '')}
                       {files.length > 1 && (
                         <span className={s.sourceCount}>
@@ -676,12 +681,12 @@ const StepTwo = ({
                 <div className='flex items-center mt-8 py-2'>
                   <Button onClick={() => onStepChange && onStepChange(-1)}>{t('datasetCreation.stepTwo.lastStep')}</Button>
                   <div className={s.divider} />
-                  <Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
+                  <Button loading={isCreating} type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
                 </div>
               )
               : (
                 <div className='flex items-center mt-8 py-2'>
-                  <Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
+                  <Button loading={isCreating} type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
                   <Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
                 </div>
               )}