improve update-all ux (#357)

* #348 improve update-all ux: show spinner and move fake progress to pkg store

* #353 fix clipped dropdown

* bump tea version usage

---------

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>

.github/workflows/build-sign-notarize.yml

@@ -159,7 +159,7 @@ jobs:
     steps:
     - uses: teaxyz/setup@v0
       with:
-        version: 0.25.0
+        version: 0.26.2
     - uses: actions/checkout@v3
     - run: rm -rf ./*.{dmg,zip} || true
 
@@ -268,8 +268,8 @@ jobs:
       run: |
         mv $x86dmg dist
         mv $arm64dmg dist
-        tea pnpm install
-        tea +nodejs.org@18 node .github/create-correct-release-yaml.js ./dist
+        tea -E pnpm install
+        tea -E node .github/create-correct-release-yaml.js ./dist
         tar -czvf dist.tgz -C dist/ .
       env:
         x86dmg: ${{ steps.app_files.outputs.dmg_x86 }}

modules/desktop/src/components/packages/package.svelte

@@ -27,37 +27,10 @@
 		}[state];
 	};
 
-	let fakeTimer: NodeJS.Timer;
-
-	async function startFakeLoader() {
-		let ms = 100;
-		let assumedDlSpeedMb = 1024 * 1024 * 3; // 3mbps
-		const p = await getPackage(pkg.full_name);
-		const size = (p?.bottles?.length ? p.bottles[0].bytes : assumedDlSpeedMb*10);
-		const eta = size / assumedDlSpeedMb;
-
-		const increment = (1 / eta)/10;
-
-		fakeTimer = setInterval(() => {
-			const progressLeft = 100 - fakeLoadingProgress;
-			const addProgress = progressLeft * increment;
-			fakeLoadingProgress = fakeLoadingProgress + addProgress;
-		}, ms);
-	}
-
 	const onClickCTA = async (version: string) => {
-		fakeLoadingProgress = 1;
-		startFakeLoader();
 		await onClick(version);
-		await new Promise((resolve) => {
-			setTimeout(() => {
-				notificationStore.add({
-					message: `Package ${pkg.full_name} v${pkg.version} has been installed.`,
-				});
-				clearTimeout(fakeTimer);
-				fakeLoadingProgress = 100;
-				resolve(null);
-			}, 1500);
+		notificationStore.add({
+			message: `Package ${pkg.full_name} v${pkg.version} has been installed.`,
 		});
 	}
 
@@ -90,7 +63,7 @@
 	availableVersions={findAvailableVersions(pkg)}
   link={`/packages/${pkg.slug}?tab=${tab}`}
   ctaLabel={getCTALabel(pkg.state)}
-	progessLoading={+fakeLoadingProgress.toFixed(2)}
+	progessLoading={pkg.install_progress_percentage}
 	ctaType="plain"
 	ctaColor={PackageStates.INSTALLED === pkg.state ? "green" : "secondary"}
   {onClickCTA}

modules/desktop/src/components/packages/packages.svelte

@@ -24,7 +24,9 @@
 	const pkgFilters: { [key:string]: (pkg: GUIPackage) => boolean } = {
 		[SideMenuOptions.all]: (_pkg: GUIPackage) => true,
 		[SideMenuOptions.installed]: (pkg: GUIPackage) => pkg.state === PackageStates.INSTALLED,
-		[SideMenuOptions.installed_updates_available]: (pkg: GUIPackage) => pkg.state === PackageStates.NEEDS_UPDATE,
+		[SideMenuOptions.installed_updates_available]: (pkg: GUIPackage) => {
+			return [PackageStates.INSTALLING, PackageStates.NEEDS_UPDATE].includes(pkg.state);
+		},
 		[SideMenuOptions.recently_updated]: (pkg: GUIPackage) => {
 			return moment(pkg.last_modified).isAfter(moment().subtract(30, "days"));
 		},
@@ -90,7 +92,7 @@
 	ul {
 		margin-top: 0px;
 		padding-top: 60px;
-		max-height: calc(100vh - 95px);
+		height: calc(100vh - 95px);
 		overflow-y: scroll;
 		overflow-x: hidden;
 		padding-right: 4px;

modules/desktop/src/libs/stores/pkgs.ts

@@ -146,8 +146,14 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
 	};
 
 	const installPkg = async (pkg: GUIPackage, version?: string) => {
+		let fakeTimer: NodeJS.Timer | null = null;
 		try {
 			updatePackage(pkg.full_name, { state: PackageStates.INSTALLING });
+
+			fakeTimer = withFakeLoader(pkg, (progress) => {
+				updatePackage(pkg.full_name, { install_progress_percentage: progress });
+			});
+
 			await installPackage(pkg, version || pkg.version);
 			trackInstall(pkg.full_name);
 			updatePackage(pkg.full_name, { state: PackageStates.INSTALLED });
@@ -155,6 +161,9 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
 			let message = "Unknown Error";
 			if (error instanceof Error) message = error.message;
 			trackInstallFailed(pkg.full_name, message || "unknown");
+		} finally {
+			fakeTimer && clearTimeout(fakeTimer);
+			updatePackage(pkg.full_name, { install_progress_percentage: 100 });
 		}
 	};
 
@@ -191,3 +200,22 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
 		installPkg
 	};
 }
+
+const withFakeLoader = (pkg: GUIPackage, callback: (progress: number) => void): NodeJS.Timer => {
+	let fakeLoadingProgress = 1;
+	const ms = 100;
+	const assumedDlSpeedMb = 1024 * 1024 * 3; // 3mbps
+	const size = pkg?.bottles?.length ? pkg.bottles[0].bytes : assumedDlSpeedMb * 10;
+	const eta = size / assumedDlSpeedMb;
+
+	const increment = 1 / eta / 10;
+
+	const fakeTimer = setInterval(() => {
+		const progressLeft = 100 - fakeLoadingProgress;
+		const addProgress = progressLeft * increment;
+		fakeLoadingProgress = fakeLoadingProgress + addProgress;
+		callback(+fakeLoadingProgress.toFixed(2));
+	}, ms);
+
+	return fakeTimer;
+};

modules/desktop/src/libs/types.ts

@@ -17,6 +17,7 @@ export type GUIPackage = Package & {
 	state: PackageStates;
 	installed_versions?: string[];
 	synced?: boolean;
+	install_progress_percentage?: number;
 };
 
 export type Course = {

modules/desktop/src/routes/+page.svelte

@@ -3,7 +3,7 @@
 
 	import { page } from '$app/stores';
 	import { t } from '$libs/translations';
-	import { navStore, packagesStore } from '$libs/stores';
+	import { navStore, packagesStore, notificationStore } from '$libs/stores';
 	import Packages from '$components/packages/packages.svelte';
 	import { PackageStates, SideMenuOptions, type GUIPackage } from '$libs/types';
 	// import SortingButtons from "$components/search-packages/sorting-buttons.svelte";
@@ -36,6 +36,9 @@
 		for(const pkg of pkgsToUpdate) {
 			try {
 				await packagesStore.installPkg(pkg);
+				notificationStore.add({
+					message: `Package ${pkg.full_name} has been updated to  v${pkg.version}.`,
+				});
 			} catch (error) {
 				log.error(error);
 			}