🚧 Add progress to loading popup.

- Added asset download progress to loading popup.

Author: SnaveSutit

package.json

@@ -98,11 +98,13 @@
 	},
 	"dependencies": {
 		"deepslate": "^0.19.2",
+		"easydl": "^1.2.0",
 		"fflate": "^0.8.2",
 		"generic-stream": "^1.2.6",
 		"marked": "^4.3.0",
 		"marked-gfm-heading-id": "^3.0.0",
 		"mc-build": "3.3.12",
+		"request-progress": "^3.0.0",
 		"svelte-ace": "^1.0.21",
 		"svelte-dnd-action": "^0.9.38"
 	}

src/components/animatedJavaLoadingPopup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" context="module">
+	import { onMount } from 'svelte'
 	import RunningArmorStand from '../assets/armor_stand_running.webp'
 	import { type Valuable } from '../util/stores'
 </script>
@@ -8,6 +9,8 @@
 
 	export let loaded: Valuable<boolean>
 	export let offline: Valuable<boolean>
+	export let progress: Valuable<number>
+	export let progressLabel: Valuable<string>
 </script>
 
 <div class={`floating ${$offline ? 'red-border' : 'blue-border'}`}>
@@ -21,8 +24,14 @@
 	{:else if $loaded}
 		<div>{translate('popup.loading.success')}</div>
 	{:else}
-		<div class="text">{translate('popup.loading.loading')}</div>
-		<img src={RunningArmorStand} alt="Running Armor Stand" />
+		<div style="display: flex; flex-direction:row;">
+			<div class="text">{translate('popup.loading.loading')}</div>
+			<img src={RunningArmorStand} alt="Running Armor Stand" />
+		</div>
+		{#if $progressLabel !== '' || $progress !== 0}
+			<div>{$progressLabel}</div>
+			<progress value={$progress} max="100"></progress>
+		{/if}
 	{/if}
 </div>
 
@@ -35,7 +44,7 @@
 		padding: 8px 16px;
 		display: flex;
 		align-items: center;
-		flex-direction: row;
+		flex-direction: column;
 	}
 	.blue-border {
 		border: 1px solid var(--color-accent);
@@ -49,6 +58,9 @@
 	img {
 		width: 32px;
 		height: 32px;
-		margin: -16px -10px;
+		margin: -4px -10px;
+	}
+	progress {
+		width: 100%;
 	}
 </style>

src/interface/animatedJavaLoadingPopup.ts

@@ -5,6 +5,8 @@ import { Valuable } from '../util/stores'
 
 const LOADED = new Valuable(false)
 const OFFLINE = new Valuable(false)
+const PROGRESS = new Valuable(0)
+const PROGRESS_LABEL = new Valuable('')
 let activeComponent: SvelteComponent | undefined
 
 export async function showLoadingPopup() {
@@ -14,6 +16,8 @@ export async function showLoadingPopup() {
 		props: {
 			loaded: LOADED,
 			offline: OFFLINE,
+			progress: PROGRESS,
+			progressLabel: PROGRESS_LABEL,
 		},
 		elementSelector() {
 			return document.body
@@ -41,3 +45,11 @@ export function showOfflineError() {
 		activeComponent = undefined
 	}, 10000)
 }
+
+export function updateLoadingProgress(progress: number) {
+	PROGRESS.set(progress)
+}
+
+export function updateLoadingProgressLabel(label: string) {
+	PROGRESS_LABEL.set(label)
+}

yarn.lock

@@ -1522,6 +1522,11 @@ dompurify@^3.0.1:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.3.tgz#cfe3ce4232c216d923832f68f2aa18b2fb9bd223"
   integrity sha512-5sOWYSNPaxz6o2MUPvtyxTTqR4D3L77pr5rUQoWgD5ROQtVIZQgJkXbo1DLlK3vj11YGw5+LnF4SYti4gZmwng==
 
+easydl@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/easydl/-/easydl-1.2.0.tgz#b2d8bd7e72c055fedc367db4b7b9585eed55c245"
+  integrity sha512-v0PnU1HGqWd6VAiJY6wwzjsznNVTeFV0YgJcv52qLexR9f5ndsPgwu9Dmf9bGC5j2ZKrO9wqORpulDM7WUBNKA==
+
 electron@^30.0.2:
   version "30.0.6"
   resolved "https://registry.yarnpkg.com/electron/-/electron-30.0.6.tgz#9ddea5f68396ecca88ad7c2c466a30fc9c16144b"
@@ -2696,6 +2701,13 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
+request-progress@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"
+  integrity sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==
+  dependencies:
+    throttleit "^1.0.0"
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -2969,6 +2981,11 @@ three@^0.134.0:
   resolved "https://registry.yarnpkg.com/three/-/three-0.134.0.tgz#d7ad4d85d050da0861bf39749b06ddfb5f17157f"
   integrity sha512-LbBerg7GaSPjYtTOnu41AMp7tV6efUNR3p4Wk5NzkSsNTBuA5mDGOfwwZL1jhhVMLx9V20HolIUo0+U3AXehbg==
 
+throttleit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.1.tgz#304ec51631c3b770c65c6c6f76938b384000f4d5"
+  integrity sha512-vDZpf9Chs9mAdfY046mcPt8fg5QSZr37hEH4TXYBnDF+izxgrbRGUAAaBvIk/fJm9aOFCGFd1EsNg5AZCbnQCQ==
+
 tinycolor2@^1.4.2, tinycolor2@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"