diff --git a/site/src/contexts/useProxyLatency.ts b/site/src/contexts/useProxyLatency.ts index df2afc277b..e4ccc4ddb3 100644 --- a/site/src/contexts/useProxyLatency.ts +++ b/site/src/contexts/useProxyLatency.ts @@ -225,6 +225,10 @@ export const useProxyLatency = ( // Local storage cleanup garbageCollectStoredLatencies(proxies, maxStoredLatencies); }); + + return () => { + observer.disconnect(); + }; }, [proxies, latestFetchRequest, maxStoredLatencies]); return { diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx index fa9d5e25be..2c3098aa82 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx @@ -245,20 +245,32 @@ const useFileTree = (templateVersion: TemplateVersion | undefined) => { fileTree: undefined, tarFile: undefined, }); + useEffect(() => { + let stale = false; const initializeFileTree = async (file: ArrayBuffer) => { const tarFile = new TarReader(); - await tarFile.readFile(file); - const fileTree = await createTemplateVersionFileTree(tarFile); - setState({ fileTree, tarFile }); + try { + await tarFile.readFile(file); + // Ignore stale updates if this effect has been cancelled. + if (stale) { + return; + } + const fileTree = createTemplateVersionFileTree(tarFile); + setState({ fileTree, tarFile }); + } catch (error) { + console.error(error); + displayError("Error on initializing the editor"); + } }; if (fileQuery.data) { - initializeFileTree(fileQuery.data).catch((reason) => { - console.error(reason); - displayError("Error on initializing the editor"); - }); + void initializeFileTree(fileQuery.data); } + + return () => { + stale = true; + }; }, [fileQuery.data]); return state; diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx index b9d844385f..ab68e0911d 100644 --- a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx @@ -97,7 +97,10 @@ export const WorkspaceBuildProgress: FC = ({ setProgressValue(est); setProgressText(text); }; - setTimeout(updateProgress, 5); + const updateTimer = requestAnimationFrame(updateProgress); + return () => { + cancelAnimationFrame(updateTimer); + }; }, [progressValue, job, transitionStats]); // HACK: the codersdk type generator doesn't support null values, but this diff --git a/site/src/utils/templateVersion.ts b/site/src/utils/templateVersion.ts index 5f6028cab7..419105b4df 100644 --- a/site/src/utils/templateVersion.ts +++ b/site/src/utils/templateVersion.ts @@ -23,9 +23,9 @@ export const getTemplateVersionFiles = async ( return files; }; -export const createTemplateVersionFileTree = async ( +export const createTemplateVersionFileTree = ( tarReader: TarReader, -): Promise => { +): FileTree => { let fileTree: FileTree = {}; for (const file of tarReader.fileInfo) { fileTree = set(