Skip to content

Commit 8bfef55

Browse files
milomgmilomg
committed
suspense
1 parent da1e70b commit 8bfef55

File tree

6 files changed

+73
-29
lines changed

6 files changed

+73
-29
lines changed

‎playground/pages/edit.tsx

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@ import { isValidUrl } from '../utils/isValidUrl';
66

77
import CompilerWorker from '../../src/workers/compiler?worker';
88
import FormatterWorker from '../../src/workers/formatter?worker';
9-
import { createTabList, defaultTabs, processImport, Repl, Tab } from '../../src';
10-
import { createSignal } from 'solid-js';
9+
import { createTabList, defaultTabs, processImport, Tab } from '../../src';
10+
import { createSignal, lazy, Suspense } from 'solid-js';
11+
12+
const Repl = lazy(() => import('../../src/components/repl'));
1113

1214
(window as any).MonacoEnvironment = {
1315
getWorker(_moduleId: unknown, label: string) {
@@ -45,16 +47,34 @@ export const Edit = (props: { dark: boolean }) => {
4547
const isHorizontal = 'isHorizontal' in params;
4648

4749
return (
48-
<Repl
49-
compiler={compiler}
50-
formatter={formatter}
51-
isHorizontal={isHorizontal}
52-
dark={props.dark}
53-
tabs={tabs()}
54-
setTabs={setTabs}
55-
current={current()}
56-
setCurrent={setCurrent}
57-
id="repl"
58-
/>
50+
<Suspense
51+
fallback={
52+
<svg
53+
class="animate-spin h-12 w-12 text-white m-auto"
54+
xmlns="http://www.w3.org/2000/svg"
55+
fill="none"
56+
viewBox="0 0 24 24"
57+
>
58+
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
59+
<path
60+
class="opacity-75"
61+
fill="currentColor"
62+
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
63+
></path>
64+
</svg>
65+
}
66+
>
67+
<Repl
68+
compiler={compiler}
69+
formatter={formatter}
70+
isHorizontal={isHorizontal}
71+
dark={props.dark}
72+
tabs={tabs()}
73+
setTabs={setTabs}
74+
current={current()}
75+
setCurrent={setCurrent}
76+
id="repl"
77+
/>
78+
</Suspense>
5979
);
6080
};

‎playground/pages/home.tsx

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useNavigate, useParams } from 'solid-app-router';
22
import { Icon } from 'solid-heroicons';
33
import { eye, eyeOff, plus, x } from 'solid-heroicons/outline';
4-
import { createResource, For } from 'solid-js';
4+
import { createResource, For, Suspense } from 'solid-js';
55
import { defaultTabs } from '../../src';
66
import { API, useAppContext } from '../context';
77

@@ -67,20 +67,42 @@ export const Home = () => {
6767
</tr>
6868
</thead>
6969
<tbody>
70-
<For each={repls()?.list}>
71-
{(repl) => (
70+
<Suspense
71+
fallback={
7272
<tr>
73-
<td>
74-
<a href={`${user()}/${repl.id}`}>{repl.title}</a>
75-
</td>
76-
<td>{new Date(repl.created_at).toLocaleString()}</td>
77-
<td>
78-
<Icon path={repl.public ? eye : eyeOff} class="w-6 inline m-2 ml-0" />
79-
<Icon path={x} class="w-6 inline m-2 mr-0 text-red-700" />
73+
<td colspan="3" class="text-center">
74+
<svg
75+
class="animate-spin h-8 w-8 text-white mx-auto mt-8"
76+
xmlns="http://www.w3.org/2000/svg"
77+
fill="none"
78+
viewBox="0 0 24 24"
79+
>
80+
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
81+
<path
82+
class="opacity-75"
83+
fill="currentColor"
84+
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
85+
></path>
86+
</svg>
8087
</td>
8188
</tr>
82-
)}
83-
</For>
89+
}
90+
>
91+
<For each={repls()?.list}>
92+
{(repl) => (
93+
<tr>
94+
<td>
95+
<a href={`${user()}/${repl.id}`}>{repl.title}</a>
96+
</td>
97+
<td>{new Date(repl.created_at).toLocaleString()}</td>
98+
<td>
99+
<Icon path={repl.public ? eye : eyeOff} class="w-6 inline m-2 ml-0" />
100+
<Icon path={x} class="w-6 inline m-2 mr-0 text-red-700" />
101+
</td>
102+
</tr>
103+
)}
104+
</For>
105+
</Suspense>
84106
</tbody>
85107
</table>
86108
</div>

‎rollup.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const preppy = {
110110
};
111111

112112
rollup({
113-
input: ['src/index.ts', 'src/workers/compiler.ts', 'src/workers/formatter.ts'],
113+
input: ['src/index.ts', 'src/workers/compiler.ts', 'src/workers/formatter.ts', 'src/components/repl.tsx'],
114114
external: ['solid-js', 'solid-js/web', 'solid-js/store', 'monaco-editor'],
115115
acornInjectPlugins: [jsx()],
116116
plugins: [
@@ -192,5 +192,6 @@ rollup({
192192
const basePath = cwd();
193193

194194
renameSync(resolve(basePath, 'lib/index.js'), resolve(basePath, 'lib/index.jsx'));
195+
renameSync(resolve(basePath, 'lib/repl.js'), resolve(basePath, 'lib/repl.jsx'));
195196
});
196197
});

‎src/components/repl.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ type ValueOf<T> = T[keyof T];
2626

2727
const id = (tab: Tab) => `${tab.name}.${tab.type}`;
2828

29-
export const Repl: typeof ReplProps = (props) => {
29+
const Repl: typeof ReplProps = (props) => {
3030
// this is bad style don't do this
3131
const { compiler, formatter } = props;
3232
let now: number;
@@ -511,3 +511,5 @@ export const Repl: typeof ReplProps = (props) => {
511511
</div>
512512
);
513513
};
514+
515+
export default Repl;

‎src/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import './assets/main.css';
22
import 'virtual:windi.css';
33

4-
export { Repl } from './components/repl';
54
export { processImport } from './utils/processImport';
65
export { createTabList } from './utils/createTabList';
76
import type { Tab } from '../types/types';

‎types/types.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component } from 'solid-js';
22
import { editor as mEditor } from 'monaco-editor';
33

4-
export declare const Repl: Component<{
4+
export type Repl = Component<{
55
compiler: Worker;
66
formatter?: Worker;
77
isHorizontal: boolean;

0 commit comments

Comments
 (0)