Refactor async fetch #112
Refactor async fetch #112
Conversation
|
I'm not sure if this checks all of the boxes from issue #94 , but I wanted to get the solution started. Interestingly, we actually aren't fetching anything right now. The example credentials all use the template property with large SVGs instead of the url property. Unfortunately, this doesn't change the performance from the UX perspective. The dialog still loads slow when you select a credential, not because it is fetching an image value and taking a long time, but rather from trying to render such large SVG components. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #112 +/- ##
=======================================
Coverage 12.04% 12.04%
=======================================
Files 6 6
Lines 83 83
=======================================
Hits 10 10
Misses 73 73 Continue to review full report in Codecov by Sentry.
|
| async function getDisplaysFromRenderMethod() { | ||
| if(props.credential?.renderMethod?.length) { | ||
| props.credential.renderMethod.forEach(async rm => { | ||
| if(supportedRenderMethods.includes(rm.type)) { | ||
| if(rm.type === 'SvgRenderingTemplate2023') { | ||
| useRenderTemplate2023(rm.id); | ||
| } else if(rm.type === 'SvgRenderingTemplate2024') { | ||
| const {template, url} = rm; | ||
| const values = props.credential; | ||
| await useRenderTemplate2024(template, url, values); | ||
| const imageValues = await Promise.all( | ||
| props.credential.renderMethod.map(async rm => { | ||
| let imageValue; | ||
| if(supportedRenderMethods.includes(rm.type)) { | ||
| if(rm.type === 'SvgRenderingTemplate2023') { | ||
| imageValue = useRenderTemplate2023(rm.id); | ||
| } else if(rm.type === 'SvgRenderingTemplate2024') { | ||
| const {template, url} = rm; | ||
| const values = props.credential; | ||
| imageValue = await useRenderTemplate2024(template, url, values); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| return imageValue; | ||
| }) | ||
| ); | ||
| imageValues.filter(Boolean).forEach(v => credentialImages.push(v)); |
There was a problem hiding this comment.
A quick note that none of this is vue-specific code, so we should import a function from a vanilla JS lib and call that (probably from bedrock-web-wallet?). That other library should also be able to, with time use a proxy or use OHTTP to obtain these things -- and be able to interact with a cache to avoid retrieval more than once across components and so on.
There was a problem hiding this comment.
@dlongley
In looking to refactor as described above, I noticed this function calls useRenderTemplate2024 that uses a UI library (Mustache) and a Quasar date library (date) to aid in the UI rendering logic.
Additionally, with renderMethod continuing to change in the future (before its become a stable standard) I thought it'd be best to leave this logic in this vue file for the time being.
jameseaster
force-pushed
the
refactor-async-fetch
branch
from
91a1186
to
daa0e14
Compare
Resolves #94
What kind of change does this PR introduce?
What is the current behavior?
What is the new behavior?
Does this PR introduce a breaking change?
How has this been tested?
Screenshots: n/a