Skip to content

Commit ff001cc

Browse files
micwallacemicwallace
committed
feat: add async loading of installed TokenScripts to improve performance
1 parent f87d64d commit ff001cc

File tree

5 files changed

+73
-70
lines changed

5 files changed

+73
-70
lines changed

‎javascript/tokenscript-viewer/src/components.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,7 @@ export namespace Components {
207207
"tsId": string;
208208
}
209209
interface TokenscriptGrid {
210+
"showLoader": boolean;
210211
}
211212
interface TransferDialog {
212213
"closeDialog": () => Promise<void>;
@@ -968,6 +969,7 @@ declare namespace LocalJSX {
968969
"tsId"?: string;
969970
}
970971
interface TokenscriptGrid {
972+
"showLoader"?: boolean;
971973
}
972974
interface TransferDialog {
973975
"engine"?: TokenScriptEngine;

‎javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-button.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,9 @@ export class TokenscriptButton {
6060

6161
const keys = Object.keys(tokens);
6262

63+
if (!keys.length)
64+
return;
65+
6366
if (keys.length > 1){
6467

6568
const numUniqueTokens = Object.values(tokens).reduce((total, token) => {

‎javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
flex-wrap: wrap;
66
}
77

8+
.loader-container {
9+
height: 60px;
10+
display: flex;
11+
justify-content: left;
12+
align-items: center;
13+
}
14+
815
@media (max-width: 768px) {
916
.ts-grid {
1017
justify-content: space-evenly;

‎javascript/tokenscript-viewer/src/components/common/tokenscript-grid/tokenscript-grid.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, h, Host} from "@stencil/core";
1+
import {Component, h, Host, Prop} from "@stencil/core";
22

33
@Component({
44
tag: 'tokenscript-grid',
@@ -8,10 +8,14 @@ import {Component, h, Host} from "@stencil/core";
88
})
99
export class TokenscriptGrid {
1010

11+
@Prop()
12+
showLoader = false;
13+
1114
render(){
1215
return (
1316
<Host class="ts-grid">
1417
<slot/>
18+
{ this.showLoader ? <div class="loader-container"><loading-spinner color="#1A42FF" size="small"></loading-spinner></div> : '' }
1519
</Host>
1620
);
1721
}

‎javascript/tokenscript-viewer/src/components/viewers/new/new-viewer.tsx‎

Lines changed: 56 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -147,47 +147,36 @@ export class NewViewer {
147147

148148
private async init(){
149149

150-
const tokenScriptsMap = {};
150+
const myTokenScripts = await dbProvider.myTokenScripts.toArray();
151151

152-
// this.app.showTsLoader();
152+
await Promise.all(myTokenScripts.map((tsMeta) => this.loadMyTokenScript(tsMeta)))
153153

154-
// do not proceed here if we are loading a TS selection choice
155-
/*const queryStr = document.location.search.substring(1);
154+
this.scriptsLoading = false;
155+
}
156156

157-
if (queryStr) {
158-
const query = new URLSearchParams(queryStr);
159-
if (query.has("registryScriptUrl") && query.has("registryTokenId")) {
160-
console.log("Abort load of TS");
161-
return;
162-
}
163-
}*/
157+
private async loadMyTokenScript(tsMeta: TokenScriptsMeta){
164158

165-
for (const tsMeta of await dbProvider.myTokenScripts.toArray()){
159+
if (this.myTokenScripts[tsMeta.tokenScriptId])
160+
return; // This script has already been loaded via processUrlLoad
166161

167-
try {
168-
const tokenScript = await this.app.loadTokenscript(tsMeta.loadType, tsMeta.tokenScriptId, tsMeta.xml);
162+
try {
163+
const tokenScript = await this.app.loadTokenscript(tsMeta.loadType, tsMeta.tokenScriptId, tsMeta.xml);
169164

170-
tokenScriptsMap[tsMeta.tokenScriptId] = {...tsMeta, tokenScript};
171-
} catch (e){
172-
console.error("Failed to load TokenScript definition: ", tsMeta.name);
165+
this.myTokenScripts = {...this.myTokenScripts, [tsMeta.tokenScriptId]: {...tsMeta, tokenScript}};
166+
} catch (e){
167+
console.error("Failed to load TokenScript definition: ", tsMeta.name);
173168

174-
if (tsMeta.loadType == "url" && new URL(tsMeta.tokenScriptId).hostname === "localhost")
175-
continue;
169+
if (tsMeta.loadType == "url" && new URL(tsMeta.tokenScriptId).hostname === "localhost")
170+
return;
176171

177-
this.showToast.emit({
178-
type: "error",
179-
title: "Failed to load TokenScript",
180-
description: e.message
181-
});
172+
this.showToast.emit({
173+
type: "error",
174+
title: "Failed to load TokenScript",
175+
description: e.message
176+
});
182177

183-
tokenScriptsMap[tsMeta.tokenScriptId] = tsMeta;
184-
}
178+
this.myTokenScripts = {...this.myTokenScripts, [tsMeta.tokenScriptId]: tsMeta};
185179
}
186-
187-
this.myTokenScripts = tokenScriptsMap;
188-
this.scriptsLoading = false;
189-
190-
// this.app.hideTsLoader();
191180
}
192181

193182
@Watch("myTokenScripts")
@@ -342,44 +331,42 @@ export class NewViewer {
342331
</button>
343332
</div>
344333
{
345-
this.scriptsLoading ?
346-
<loading-spinner color="#1A42FF" size="small"></loading-spinner> :
347-
(Object.values(this.myTokenScripts).length > 0 ?
348-
<tokenscript-grid>
349-
{
350-
Object.values(this.myTokenScripts).map((ts) => {
351-
return (
352-
<tokenscript-button
353-
key={ts.tokenScriptId}
354-
tsId={ts.tokenScriptId}
355-
name={ts.name}
356-
imageUrl={ts.iconUrl}
357-
tokenScript={ts.tokenScript}
358-
onClick={() => {
359-
if (!ts.tokenScript) {
360-
this.showToast.emit({
361-
type: "error",
362-
title: "TokenScript not available",
363-
description: "This tokenscript could not be resolved"
364-
});
365-
return;
366-
}
367-
this.viewerPopover.open(ts.tokenScript);
368-
}}
369-
onRemove={async (tsId: string) => {
370-
this.removeTokenScript(tsId);
371-
}}>
372-
</tokenscript-button>
373-
);
374-
})
375-
}
376-
</tokenscript-grid> :
377-
<div>
378-
<strong style={{fontSize: "13px"}}>You don't have any TokenScripts in your
379-
library yet</strong><br/>
380-
<span style={{fontSize: "12px"}}>Add TokenScripts by selecting popular ones below or adding them manually via the Add Tokens button.</span>
381-
</div>
382-
)
334+
Object.values(this.myTokenScripts).length > 0 ?
335+
<tokenscript-grid showLoader={this.scriptsLoading}>
336+
{
337+
Object.values(this.myTokenScripts).map((ts) => {
338+
return (
339+
<tokenscript-button
340+
key={ts.tokenScriptId}
341+
tsId={ts.tokenScriptId}
342+
name={ts.name}
343+
imageUrl={ts.iconUrl}
344+
tokenScript={ts.tokenScript}
345+
onClick={() => {
346+
if (!ts.tokenScript) {
347+
this.showToast.emit({
348+
type: "error",
349+
title: "TokenScript not available",
350+
description: "This tokenscript could not be resolved"
351+
});
352+
return;
353+
}
354+
this.viewerPopover.open(ts.tokenScript);
355+
}}
356+
onRemove={async (tsId: string) => {
357+
this.removeTokenScript(tsId);
358+
}}>
359+
</tokenscript-button>
360+
);
361+
})
362+
}
363+
</tokenscript-grid> :
364+
(!this.scriptsLoading ? <div>
365+
<strong style={{fontSize: "13px"}}>You don't have any TokenScripts in your
366+
library yet</strong><br/>
367+
<span style={{fontSize: "12px"}}>Add TokenScripts by selecting popular ones below or adding them manually via the Add Tokens button.</span>
368+
</div> : '')
369+
383370
}
384371
</div>
385372
{this.popularTokenscripts.length > 0 ?

0 commit comments

Comments
 (0)