refactor: Refactor FileIcon component to use useMemo for file type determination and rename loading state variable for clarity

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { OnlineDriveFileType } from '@/models/pipeline'
 import { BucketsBlue, Folder } from '@/app/components/base/icons/src/public/knowledge/online-drive'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
@@ -18,6 +18,13 @@ const FileIcon = ({
   size = 'md',
   className,
 }: FileIconProps) => {
+  const fileType = useMemo(() => {
+    if (type === OnlineDriveFileType.bucket || type === OnlineDriveFileType.folder)
+      return 'custom'
+
+    return getFileType(fileName)
+  }, [type, fileName])
+
   if (type === OnlineDriveFileType.bucket) {
     return (
       <BucketsBlue className={cn('size-[18px]', className)} />
@@ -33,7 +40,7 @@ const FileIcon = ({
   return (
     <FileTypeIcon
       size={size}
-      type={getFileType(fileName)}
+      type={fileType}
       className={cn('size-[18px]', className)}
     />
   )

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/index.tsx

@@ -47,7 +47,7 @@ const List = ({
   }, [anchorRef])
 
   const isAllLoading = isLoading && fileList.length === 0 && keywords.length === 0
-  const isPartLoading = isLoading && fileList.length > 0
+  const isPartialLoading = isLoading && fileList.length > 0
   const isEmptyFolder = !isLoading && fileList.length === 0 && keywords.length === 0
   const isSearchResultEmpty = !isLoading && fileList.length === 0 && keywords.length > 0
 
@@ -86,7 +86,7 @@ const List = ({
             })
           }
           {
-            isPartLoading && (
+            isPartialLoading && (
               <div className='flex items-center justify-center py-2'>
                 <RiLoader2Line className='animation-spin size-4 text-text-tertiary' />
               </div>

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx

@@ -1,12 +1,13 @@
 import Checkbox from '@/app/components/base/checkbox'
 import Radio from '@/app/components/base/radio/ui'
 import type { OnlineDriveFile } from '@/models/pipeline'
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback } from 'react'
 import FileIcon from './file-icon'
 import { formatFileSize } from '@/utils/format'
 import Tooltip from '@/app/components/base/tooltip'
 import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
+import type { Placement } from '@floating-ui/react'
 
 type ItemProps = {
   file: OnlineDriveFile
@@ -27,10 +28,16 @@ const Item = ({
 }: ItemProps) => {
   const { t } = useTranslation()
   const { id, name, type, size } = file
-  const isBucket = useMemo(() => type === 'bucket', [type])
+
-  const isFolder = useMemo(() => type === 'folder', [type])
+  const isBucket = type === 'bucket'
+  const isFolder = type === 'folder'
 
   const Wrapper = disabled ? Tooltip : React.Fragment
+  const wrapperProps = disabled ? {
+    popupContent: t('datasetPipeline.onlineDrive.notSupportedFileType'),
+    position: 'top-end' as Placement,
+    offset: { mainAxis: 4, crossAxis: -104 },
+  } : {}
 
   const handleSelect = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation()
@@ -70,16 +77,14 @@ const Item = ({
         />
       )}
       <Wrapper
-        popupContent={t('datasetPipeline.onlineDrive.notSupportedFileType')}
+        {...wrapperProps}
-        position='top-end'
-        offset={{ mainAxis: 4, crossAxis: -104 }}
       >
         <div
           className={cn(
             'flex grow items-center gap-x-1 overflow-hidden py-0.5',
             disabled && 'opacity-30',
           )}>
-          <FileIcon type={type} fileName={name} className='shrink-0' />
+          <FileIcon type={type} fileName={name} className='shrink-0 transform-gpu' />
           <span
             className='system-sm-medium grow truncate text-text-secondary'
             title={name}