feat(website): show WASM loading status in playground#348
Conversation
✅ Deploy Preview for rslint ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the Rslint playground by adding visual feedback for WebAssembly initialization status. The implementation shows a loading spinner while WASM loads and properly handles error states when initialization fails.
Key changes:
- Added loading state management with spinner UI during WASM initialization
- Enhanced error handling to display errors even before playground is fully initialized
- Improved user experience by providing visual feedback during async operations
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| website/theme/components/Playground/index.tsx | Added loading state management and error handling for WASM initialization |
| website/theme/components/Playground/ResultPanel.tsx | Enhanced to display loading spinner and error messages during initialization |
| website/theme/components/Playground/ResultPanel.css | Added CSS styles for loading spinner animation |
| async function runLint() { | ||
| try { | ||
| setError(undefined); | ||
| if (!initialized) setLoading(true); |
There was a problem hiding this comment.
This condition will cause the loading state to be set to true on every lint run before initialization, but it won't be set to false if the service is already cached and no async operation occurs. The loading state should be managed based on whether an async operation is actually happening.
| if (!initialized) setLoading(true); | |
| if (!rslintService) setLoading(true); |
| const { diagnostics, ast, error, initialized, fixedCode, typeInfo, loading } = | ||
| props; |
There was a problem hiding this comment.
[nitpick] The destructuring spans multiple lines unnecessarily. Consider keeping it on a single line or using individual const declarations for better readability.
| const { diagnostics, ast, error, initialized, fixedCode, typeInfo, loading } = | |
| props; | |
| const { diagnostics, ast, error, initialized, fixedCode, typeInfo, loading } = props; |
Summary
Testing
pnpm run formatpnpm build(fails: rslib not found)pnpm run test(fails: rstest not found)pnpm run test:go(fails: missing module typescript-go)pnpm run check-spell(fails: Forbidden - 403)pnpm run lint:go(fails: Go version mismatch)https://chatgpt.com/codex/tasks/task_e_68bf8de38430832dbf792184f2be51d8