fix: reduce flicker when loading credential images #233
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description of change
The previous handling of images loaded the fallback images immediately. The revised approach awaits a promise that returns the asset URL. The fallback image is shown only when no asset URL could be resolved.
If the asset URL can be resolved, the image is still rendered with a slight delay.
I tried an alternative approach to compute the asset URL in a SvelteKit page load function. But this did not work. Not clear why, but calling Tauri APIs crashes the load function.
The perceived flickering should be less because the fallback does not get rendered by default. But it is possible that you will perceive the delay when the image loads. This is unfortunately a limitation of client-side loading.
Links to any relevant issues
Fixes issue #182.
How the change has been tested
Screen record the app while clicking on badges in the Ferris profile. Then use the scrubber to scrub through the recorded images after clicking a badge. You should not see the fallback image loaded. However you will see no image loaded before that image gets loaded.
Definition of Done checklist
Add an
x
to the boxes that are relevant to your changes.