Skip to content

Commit

Permalink
add loading view
Browse files Browse the repository at this point in the history
  • Loading branch information
iFwu committed Oct 7, 2024
1 parent b343a80 commit 128f1df
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 2 deletions.
12 changes: 11 additions & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { useChessEngine } from './hooks/useChessEngine';
import { useDepth } from './hooks/useDepth';
import { DepthControl } from './components/DepthControl';
import { WelcomeModal } from './components/WelcomeModal';
import { Spinner } from './components/Spinner';

export function App() {
const [overlayImageSrc, setOverlayImageSrc] = useState('');
Expand All @@ -35,7 +36,7 @@ export function App() {
height: number;
}>();

const { templates } = useOpenCV();
const { templates, isLoading: isOpenCVLoading } = useOpenCV();
const { bestMove, loading, error, fetchBestMove, setBestMove } = useChessEngine();
const { depth, setDepth } = useDepth();

Expand Down Expand Up @@ -145,6 +146,15 @@ export function App() {
processImage(img);
};

if (isOpenCVLoading) {
return (
<div className="loading-overlay">
<Spinner />
<p>正在加载必要组件,请稍候...</p>
</div>
);
}

return (
<>
<header>
Expand Down
40 changes: 40 additions & 0 deletions src/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -506,4 +506,44 @@ dialog button:hover {
padding: 8px 16px;
font-size: 0.9rem;
}
}

/* 在文件末尾添加以下样式 */

.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}

.loading-overlay p {
margin-top: 20px;
font-size: 1.2rem;
color: #333;
}

.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
width: 36px;
height: 36px;
border-radius: 50%;
border-left-color: #09f;
animation: spin 1s ease infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
5 changes: 5 additions & 0 deletions src/components/Spinner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { h } from 'preact';

Check failure on line 1 in src/components/Spinner.tsx

View workflow job for this annotation

GitHub Actions / build-and-deploy

'h' is declared but its value is never read.

export const Spinner = () => (
<div className="spinner"></div>
);
5 changes: 4 additions & 1 deletion src/hooks/useOpenCV.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { preprocessAllTemplates } from '../chessboard/templateMatching';

export function useOpenCV() {
const [templates, setTemplates] = useState<Record<PieceName, cv.Mat> | null>(null);
const [isLoading, setIsLoading] = useState(true); // Add isLoading state

useEffect(() => {
const initialize = async () => {
Expand All @@ -21,11 +22,13 @@ export function useOpenCV() {
setTemplates(loadedTemplates);
} catch (error) {
console.error('Error loading templates:', error);
} finally {
setIsLoading(false); // Set isLoading to false after initialization
}
};

initialize();
}, []);

return { templates };
return { templates, isLoading }; // Return isLoading
}

0 comments on commit 128f1df

Please sign in to comment.