diff --git a/src/components/FileTree/icon.tsx b/src/components/FileTree/icon.tsx
index 298775e..8e28487 100644
--- a/src/components/FileTree/icon.tsx
+++ b/src/components/FileTree/icon.tsx
@@ -19,7 +19,7 @@ function getIconHelper() {
cache.set('txt', );
cache.set('closedDirectory', );
cache.set('openDirectory', );
- return function Icon(extension: string, name: string): ReactNode {
+ return function Icon(extension = '', name = ''): ReactNode {
if (cache.has(extension)) return cache.get(extension);
else if (cache.has(name)) return cache.get(name);
else return ;
diff --git a/src/components/FileTree/index.tsx b/src/components/FileTree/index.tsx
index c72d085..ba41a3e 100644
--- a/src/components/FileTree/index.tsx
+++ b/src/components/FileTree/index.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { getIcon } from './icon';
import { useDirs, type Directory, type File } from '@/hooks/useFile';
import { createStyles } from 'antd-style';
+import { LoadingOutlined } from '@ant-design/icons';
const useStyles = createStyles(({ token, css }) => {
return {
@@ -64,11 +65,13 @@ const FileDiv = ({
icon,
selectedFile,
onClick,
+ isLoading,
}: {
file: File | Directory; // 当前文件
icon?: string; // 图标名称
selectedFile: File | undefined; // 选中的文件
onClick: () => void; // 点击事件
+ isLoading?: boolean;
}) => {
const isSelected = (selectedFile && selectedFile.path === file.path) as boolean;
const pathArray = file.path.split('/');
@@ -87,7 +90,7 @@ const FileDiv = ({
}}
onClick={onClick}
>
-
+
{name}
);
@@ -108,13 +111,14 @@ const DirDiv = ({
}) => {
let defaultOpen = selectedFile?.path.includes(directory.path);
const [open, setOpen] = useState(defaultOpen);
- const { data: res } = useDirs({ fullname: pkgName, spec }, directory.path, !open);
+ const { data: res, isLoading } = useDirs({ fullname: pkgName, spec }, directory.path, !open);
return (
<>
setOpen(!open)}
/>
{open ? (
@@ -130,8 +134,7 @@ const DirDiv = ({
);
};
-const FileIcon = ({ extension, name }: { name?: string; extension?: string }) => {
- let icon = getIcon(extension || '', name || '');
+const FileIcon = ({ extension, name, isLoading }: { name?: string; extension?: string, isLoading: boolean }) => {
return (
alignItems: 'center',
}}
>
- {icon}
+ {isLoading ? : getIcon(extension, name)}
);
};