feat: add async loading of installed TokenScripts to improve performance

SmartTokenLabs · Sep 17, 2024 · ff001cc · ff001cc
1 parent f87d64d
commit ff001cc
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 70 deletions.
diff --git a/javascript/tokenscript-viewer/src/components.d.ts b/javascript/tokenscript-viewer/src/components.d.ts
@@ -207,6 +207,7 @@ export namespace Components {
         "tsId": string;
     }
     interface TokenscriptGrid {
+        "showLoader": boolean;
     }
     interface TransferDialog {
         "closeDialog": () => Promise<void>;
@@ -968,6 +969,7 @@ declare namespace LocalJSX {
         "tsId"?: string;
     }
     interface TokenscriptGrid {
+        "showLoader"?: boolean;
     }
     interface TransferDialog {
         "engine"?: TokenScriptEngine;

diff --git a/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-button.tsx b/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-button.tsx
@@ -60,6 +60,9 @@ export class TokenscriptButton {
 
 		const keys = Object.keys(tokens);
 
+		if (!keys.length)
+			return;
+
 		if (keys.length > 1){
 
 			const numUniqueTokens = Object.values(tokens).reduce((total, token) => {

diff --git a/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.css b/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.css
@@ -5,6 +5,13 @@
 	flex-wrap: wrap;
 }
 
+.loader-container {
+	height: 60px;
+	display: flex;
+	justify-content: left;
+	align-items: center;
+}
+
 @media (max-width: 768px) {
 	.ts-grid {
 		justify-content: space-evenly;

diff --git a/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.tsx b/javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.tsx
@@ -1,4 +1,4 @@
-import {Component, h, Host} from "@stencil/core";
+import {Component, h, Host, Prop} from "@stencil/core";
 
 @Component({
 	tag: 'tokenscript-grid',
@@ -8,10 +8,14 @@ import {Component, h, Host} from "@stencil/core";
 })
 export class TokenscriptGrid {
 
+	@Prop()
+	showLoader = false;
+
 	render(){
 		return (
 			<Host class="ts-grid">
 				<slot/>
+				{ this.showLoader ? <div class="loader-container"><loading-spinner color="#1A42FF" size="small"></loading-spinner></div> : '' }
 			</Host>
 		);
 	}

diff --git a/javascript/tokenscript-viewer/src/components/viewers/new/new-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/new/new-viewer.tsx
@@ -147,47 +147,36 @@ export class NewViewer {
 
 	private async init(){
 
-		const tokenScriptsMap = {};
+		const myTokenScripts = await dbProvider.myTokenScripts.toArray();
 
-		// this.app.showTsLoader();
+		await Promise.all(myTokenScripts.map((tsMeta) => this.loadMyTokenScript(tsMeta)))
 
-		// do not proceed here if we are loading a TS selection choice
-		/*const queryStr = document.location.search.substring(1);
+		this.scriptsLoading = false;
+	}
 
-		if (queryStr) {
-			const query = new URLSearchParams(queryStr);
-			if (query.has("registryScriptUrl") && query.has("registryTokenId")) {
-				console.log("Abort load of TS");
-				return;
-			}
-		}*/
+	private async loadMyTokenScript(tsMeta: TokenScriptsMeta){
 
-		for (const tsMeta of await dbProvider.myTokenScripts.toArray()){
+		if (this.myTokenScripts[tsMeta.tokenScriptId])
+			return; // This script has already been loaded via processUrlLoad
 
-			try {
-				const tokenScript = await this.app.loadTokenscript(tsMeta.loadType, tsMeta.tokenScriptId, tsMeta.xml);
+		try {
+			const tokenScript = await this.app.loadTokenscript(tsMeta.loadType, tsMeta.tokenScriptId, tsMeta.xml);
 
-				tokenScriptsMap[tsMeta.tokenScriptId] = {...tsMeta, tokenScript};
-			} catch (e){
-				console.error("Failed to load TokenScript definition: ", tsMeta.name);
+			this.myTokenScripts = {...this.myTokenScripts, [tsMeta.tokenScriptId]: {...tsMeta, tokenScript}};
+		} catch (e){
+			console.error("Failed to load TokenScript definition: ", tsMeta.name);
 
-				if (tsMeta.loadType == "url" && new URL(tsMeta.tokenScriptId).hostname === "localhost")
-					continue;
+			if (tsMeta.loadType == "url" && new URL(tsMeta.tokenScriptId).hostname === "localhost")
+				return;
 
-				this.showToast.emit({
-					type: "error",
-					title: "Failed to load TokenScript",
-					description: e.message
-				});
+			this.showToast.emit({
+				type: "error",
+				title: "Failed to load TokenScript",
+				description: e.message
+			});
 
-				tokenScriptsMap[tsMeta.tokenScriptId] = tsMeta;
-			}
+			this.myTokenScripts = {...this.myTokenScripts, [tsMeta.tokenScriptId]: tsMeta};
 		}
-
-		this.myTokenScripts = tokenScriptsMap;
-		this.scriptsLoading = false;
-
-		// this.app.hideTsLoader();
 	}
 
 	@Watch("myTokenScripts")
@@ -342,44 +331,42 @@ export class NewViewer {
 						</button>
 					</div>
 					{
-						this.scriptsLoading ?
-							<loading-spinner color="#1A42FF" size="small"></loading-spinner> :
-							(Object.values(this.myTokenScripts).length > 0 ?
-									<tokenscript-grid>
-										{
-											Object.values(this.myTokenScripts).map((ts) => {
-												return (
-													<tokenscript-button
-														key={ts.tokenScriptId}
-														tsId={ts.tokenScriptId}
-														name={ts.name}
-														imageUrl={ts.iconUrl}
-														tokenScript={ts.tokenScript}
-														onClick={() => {
-															if (!ts.tokenScript) {
-																this.showToast.emit({
-																	type: "error",
-																	title: "TokenScript not available",
-																	description: "This tokenscript could not be resolved"
-																});
-																return;
-															}
-															this.viewerPopover.open(ts.tokenScript);
-														}}
-														onRemove={async (tsId: string) => {
-															this.removeTokenScript(tsId);
-														}}>
-													</tokenscript-button>
-												);
-											})
-										}
-									</tokenscript-grid> :
-									<div>
-										<strong style={{fontSize: "13px"}}>You don't have any TokenScripts in your
-											library yet</strong><br/>
-										<span style={{fontSize: "12px"}}>Add TokenScripts by selecting popular ones below or adding them manually via the Add Tokens button.</span>
-									</div>
-							)
+						Object.values(this.myTokenScripts).length > 0 ?
+							<tokenscript-grid showLoader={this.scriptsLoading}>
+								{
+									Object.values(this.myTokenScripts).map((ts) => {
+										return (
+											<tokenscript-button
+												key={ts.tokenScriptId}
+												tsId={ts.tokenScriptId}
+												name={ts.name}
+												imageUrl={ts.iconUrl}
+												tokenScript={ts.tokenScript}
+												onClick={() => {
+													if (!ts.tokenScript) {
+														this.showToast.emit({
+															type: "error",
+															title: "TokenScript not available",
+															description: "This tokenscript could not be resolved"
+														});
+														return;
+													}
+													this.viewerPopover.open(ts.tokenScript);
+												}}
+												onRemove={async (tsId: string) => {
+													this.removeTokenScript(tsId);
+												}}>
+											</tokenscript-button>
+										);
+									})
+								}
+							</tokenscript-grid> :
+							(!this.scriptsLoading ? <div>
+								<strong style={{fontSize: "13px"}}>You don't have any TokenScripts in your
+									library yet</strong><br/>
+								<span style={{fontSize: "12px"}}>Add TokenScripts by selecting popular ones below or adding them manually via the Add Tokens button.</span>
+							</div> : '')
+
 					}
 				</div>
 				{this.popularTokenscripts.length > 0 ?