icd/rentgen
icd/rentgen
2
1
Fork 0
Code Issues 72 Pull Requests Projects Releases 6 Wiki Activity

Reduce live preview flicker. Make the preview the first item

Browse Source
This commit is contained in:
Kuba Orlik 2022-07-15 12:11:11 +02:00
parent 7c4de6fc5c
commit 520a26923e
1 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/report-window/screenshot-generator.tsx
View File

@ -73,15 +73,19 @@ export default function ScreenshotGenerator({
const [output, setOutput] = React.useState<any>({}); const [output, setOutput] = React.useState<any>({});
const [currentAction, setCurrentAction] = React.useState<string>(''); const [currentAction, setCurrentAction] = React.useState<string>('');
const [preview, setPreview] = React.useState<string>(''); const [preview, setPreview] = React.useState<string>('');
const [lastPreview, setLastPreview] = React.useState<string>('');
async function subscribeTask(path: string): Promise<screenshotTask> { async function subscribeTask(path: string): Promise<screenshotTask> {
let response = { status: taskState.WAITING }; let response = { status: taskState.WAITING };
let last_preview = '';
while (response.status === taskState.WAITING || response.status === taskState.RUNNING) { while (response.status === taskState.WAITING || response.status === taskState.RUNNING) {
await new Promise((resolve) => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
response = await (await pollTask(path)).json(); response = await (await pollTask(path)).json();
setImages((response as screenshotTask)?.images); setImages((response as screenshotTask)?.images);
setCurrentAction((response as screenshotTask)?.current_action); setCurrentAction((response as screenshotTask)?.current_action);
setLastPreview(last_preview);
setPreview((response as screenshotTask)?.preview); setPreview((response as screenshotTask)?.preview);
last_preview = (response as screenshotTask)?.preview;
document.querySelector('.images')?.scrollTo({ document.querySelector('.images')?.scrollTo({
top: document.querySelector('.images')?.scrollHeight, top: document.querySelector('.images')?.scrollHeight,
behavior: 'smooth', behavior: 'smooth',
@ -158,6 +162,7 @@ export default function ScreenshotGenerator({
setTaskId(urlArr[urlArr.length - 1]); setTaskId(urlArr[urlArr.length - 1]);
const response = await subscribeTask(task.url); const response = await subscribeTask(task.url);
setImages(response.images); setImages(response.images);
setLastPreview(preview);
setPreview(response.preview); setPreview(response.preview);
setOutput(response); setOutput(response);
setRequestPath(response.zip_url); setRequestPath(response.zip_url);
@ -191,6 +196,22 @@ export default function ScreenshotGenerator({
) : null} ) : null}
<div className="images"> <div className="images">
{mode === 'in_progress' ? (
<div
className="browser"
style={{
backgroundImage: `url(${SS_URL}${preview})${
lastPreview ? `, url(${SS_URL}${lastPreview})` : ''
}`,
}}
>
<div className="browser__header browser__header--in_progress">
<div className="browser__header--address-bar"></div>
<div className="browser__header--controls">· · ·</div>
</div>
<div className="browser__content"></div>
</div>
) : null}
{images.map((screenshot) => { {images.map((screenshot) => {
return ( return (
<div <div
@ -210,21 +231,6 @@ export default function ScreenshotGenerator({
</div> </div>
); );
})} })}
{mode === 'in_progress' ? (
<div
className="browser"
style={{
backgroundImage: `url(${SS_URL}${preview})`,
}}
>
<div className="browser__header browser__header--in_progress">
<div className="browser__header--address-bar"></div>
<div className="browser__header--controls">· · ·</div>
</div>
<div className="browser__content"></div>
</div>
) : null}
</div> </div>
</div> </div>
<div className="buttons-container"> <div className="buttons-container">