Skip to content

Commit 8594da2

Browse files
authored
feat(website): show WASM loading status in playground (#348)
1 parent 14e13f8 commit 8594da2

File tree

3 files changed

+34
-2
lines changed

3 files changed

+34
-2
lines changed

website/theme/components/Playground/ResultPanel.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,15 @@
5656
height: calc(100% - 46px);
5757
}
5858

59+
.loading-state {
60+
display: flex;
61+
height: 100%;
62+
align-items: center;
63+
justify-content: center;
64+
gap: 0.5rem;
65+
color: #656d76;
66+
}
67+
5968
.lint-results {
6069
height: calc(100% - 8px);
6170
}

website/theme/components/Playground/ResultPanel.tsx

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,14 @@ interface ResultPanelProps {
1717
error?: string;
1818
fixedCode?: string;
1919
typeInfo?: string;
20+
loading?: boolean;
2021
}
2122

2223
type TabType = 'lint' | 'fixed' | 'ast' | 'type';
2324

2425
export const ResultPanel: React.FC<ResultPanelProps> = props => {
25-
const { diagnostics, ast, error, initialized, fixedCode, typeInfo } = props;
26+
const { diagnostics, ast, error, initialized, fixedCode, typeInfo, loading } =
27+
props;
2628
const [activeTab, setActiveTab] = useState<TabType>('lint');
2729

2830
return (
@@ -100,7 +102,23 @@ export const ResultPanel: React.FC<ResultPanelProps> = props => {
100102
</div>
101103
)}
102104
</div>
103-
) : null}
105+
) : (
106+
<div className="result-content">
107+
{loading ? (
108+
<div className="loading-state">
109+
<div className="spinner"></div>
110+
<div>Loading WASM...</div>
111+
</div>
112+
) : error ? (
113+
<div className="error-message">
114+
<div className="error-icon">⚠️</div>
115+
<div className="error-text">
116+
<strong>Error:</strong> {error}
117+
</div>
118+
</div>
119+
) : null}
120+
</div>
121+
)}
104122
</div>
105123
);
106124
};

website/theme/components/Playground/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@ const Playground: React.FC = () => {
2323
const [initialized, setInitialized] = useState(false);
2424
const [error, setError] = useState<string | undefined>();
2525
const [ast, setAst] = useState<string | undefined>();
26+
const [loading, setLoading] = useState(true);
2627

2728
async function runLint() {
2829
try {
2930
setError(undefined);
31+
if (!initialized) setLoading(true);
3032
const service = await ensureService();
3133
const code = editorRef.current?.getValue() ?? '';
3234

@@ -93,6 +95,8 @@ const Playground: React.FC = () => {
9395
} catch (err) {
9496
const errorMessage = err instanceof Error ? err.message : String(err);
9597
setError(`Linting failed: ${errorMessage}`);
98+
} finally {
99+
setLoading(false);
96100
}
97101
}
98102

@@ -110,6 +114,7 @@ const Playground: React.FC = () => {
110114
diagnostics={diagnostics}
111115
ast={ast}
112116
error={error}
117+
loading={loading}
113118
/>
114119
</div>
115120
);

0 commit comments

Comments
 (0)