Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add some text for loading state

This commit is contained in:
Nate Kelley 2025-09-03 15:44:01 -06:00
parent 596b9edc38
commit ed9a09e051
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web-tss/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
View File

@ -4,14 +4,13 @@
import type { EditorProps, OnMount } from '@monaco-editor/react';
import { ClientOnly } from '@tanstack/react-router';
import type React from 'react';
import { forwardRef, lazy, Suspense, useCallback, useEffect, useMemo } from 'react';
import { forwardRef, lazy, Suspense, useCallback, useMemo } from 'react';
import { useMount } from '@/hooks/useMount';
import { cn } from '@/lib/utils';
import { isServer } from '@/lib/window';
import { LoadingCodeEditor } from './LoadingCodeEditor';
import { setupMonacoWebWorker } from './setupMonacoWebWorker';
import { configureMonacoToUseYaml } from './yamlHelper';
const isServer = typeof window === 'undefined';
let hasSetupMonacoWebWorker = false;
//https://github.com/brijeshb42/monaco-ace-tokenizer
@ -192,6 +191,7 @@ export const AppCodeEditor = forwardRef<AppCodeEditorHandle, AppCodeEditorProps>
onMount={onMountCodeEditor}
onChange={onChangeCodeEditor}
options={memoizedMonacoEditorOptions}
loading={<LoadingCodeEditor />}
/>
</Suspense>
</ClientOnly>

11
apps/web-tss/src/components/ui/inputs/AppCodeEditor/LoadingCodeEditor.tsx
View File

@ -1,9 +1,14 @@
import { useMount } from '@/hooks/useMount';
import { CircleSpinnerLoaderContainer } from '../../loaders/CircleSpinnerLoaderContainer';
import { Text } from '../../typography/Text';
export const LoadingCodeEditor = () => {
export const LoadingCodeEditor = ({ text = 'Loading code editor...' }) => {
return (
<div className="animate-in fade-in-0 duration-300">
<CircleSpinnerLoaderContainer className="animate-in fade-in-0 duration-300" />
<div className="animate-in h-full flex flex-col items-center justify-center duration-300">
<div className="flex flex-col items-center justify-center space-y-4">
<Text>{text}</Text>
<CircleSpinnerLoaderContainer />
</div>
</div>
);
};