Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: optimaze loading state ui

Browse Source
This commit is contained in:
clean99 2023-11-24 11:09:11 +08:00
parent ef6bd4d00f
commit ff96814a43
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/App.tsx
View File

@ -31,6 +31,7 @@ import { UrlInputSection } from "./components/UrlInputSection";
import TermsOfServiceDialog from "./components/TermsOfServiceDialog"; import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
import html2canvas from "html2canvas"; import html2canvas from "html2canvas";
import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants"; import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants";
import { handleInstructions } from "./lib/utils";
function App() { function App() {
const [appState, setAppState] = useState<AppState>(AppState.INITIAL); const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
@ -116,6 +117,7 @@ function App() {
function doGenerateInstruction(params: InstructionGenerationParams) { function doGenerateInstruction(params: InstructionGenerationParams) {
setAppState(AppState.INSTRUCTION_GENERATING); setAppState(AppState.INSTRUCTION_GENERATING);
setUpdateInstruction("");
// Merge settings with params // Merge settings with params
const updatedParams = { ...params, ...settings }; const updatedParams = { ...params, ...settings };
@ -126,7 +128,10 @@ function App() {
(token) => setUpdateInstruction((prev) => prev + token), (token) => setUpdateInstruction((prev) => prev + token),
(code) => setUpdateInstruction(code), (code) => setUpdateInstruction(code),
(line) => setExecutionConsole((prev) => [...prev, line]), (line) => setExecutionConsole((prev) => [...prev, line]),
() => setAppState(AppState.CODE_READY) () => {
setUpdateInstruction(instruction => handleInstructions(instruction));
setAppState(AppState.CODE_READY);
}
); );
} }
@ -254,7 +259,7 @@ function App() {
className="flex items-center gap-x-2" className="flex items-center gap-x-2"
disabled={appState === AppState.INSTRUCTION_GENERATING} disabled={appState === AppState.INSTRUCTION_GENERATING}
> >
Generate Instruction {appState === AppState.INSTRUCTION_GENERATING ? 'Generating Instruction...' : 'Generate Instruction'}
</Button> </Button>
<Button onClick={doUpdate} disabled={appState === AppState.INSTRUCTION_GENERATING}>Update</Button> <Button onClick={doUpdate} disabled={appState === AppState.INSTRUCTION_GENERATING}>Update</Button>
</div> </div>
@ -268,6 +273,7 @@ function App() {
<Button <Button
onClick={reset} onClick={reset}
className="flex items-center gap-x-2" className="flex items-center gap-x-2"
disabled={appState === AppState.INSTRUCTION_GENERATING}
> >
<FaUndo /> <FaUndo />
Reset Reset
@ -324,7 +330,7 @@ function App() {
</div> </div>
)} )}
{(appState === AppState.CODING || appState === AppState.CODE_READY) && ( {(appState === AppState.CODING || appState === AppState.CODE_READY || appState === AppState.INSTRUCTION_GENERATING) && (
<div className="ml-4"> <div className="ml-4">
<Tabs defaultValue="desktop"> <Tabs defaultValue="desktop">
<div className="flex justify-end mr-8 mb-4"> <div className="flex justify-end mr-8 mb-4">