Skip to content

Preload card normal images for the feedback area - #118

Merged
scarletcs merged 13 commits into
mainfrom
preload-updates
Oct 4, 2025
Merged

scarletcs merged 13 commits into
mainfrom
preload-updates

Conversation

@scarletcs

Copy link
Copy Markdown
Collaborator

Currently the feedback area can have a noticeable period during which its height flickers becauase the Normal image needs to load in.

I'm addressing this in two ways:

  • Feedback images now have a decent height and width configured.
  • We preload the Normal image while you're busy working out the current art, reducing delays to nil.

This may just result in a brief flicker of the card image changing over, rather than a lengthy delay.

I also made these changes:

  • Created getCardImages(), which extracts all the image_uris objects from a card. This is because we now need to do this complex process in more than one location.
  • Extracted pickRandomItem(). It's only done in one location, but it helps describe what's actually happening in the code.
  • Revised CardArt's imageUri computed property to use those two things.

I tried to add a little PreloadImage element to make preloading slightly more straightforward (and make it obvious that's what is happening) but for some reason, its :load event never emits. Maybe I did something obviously wrong that I completely missed. I added it in 7474537 during which it was immediately experiencing this error, and deleted it in 04d5e83.

this is so we can later preload the card's normal images
it wasn't working for some reason. load/error events weren't firing from the component. one day i'll figure out why.
@scarletcs scarletcs self-assigned this Sep 23, 2025

@crookedneighbor crookedneighbor left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need test files for the new util files?

v-for="imageUri in getCardImages(card)"
:key="imageUri.normal"
alt=""
class="vh preload"

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The vh class is usually used to hide the element, but make it accessible to screenreaders. Should the preload class just include the necessary stuff to hide the image so we're not using the vh class for multiple things?

@scarletcs scarletcs Oct 2, 2025

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vh also just makes it visually hidden, which is the behaviour we need. The preload class would just be duplicating it. It's already marked not for screen readers via alt="".

Comment thread src/components/CardArt.vue Outdated
Comment thread src/components/CardArt.vue Outdated
scarletcs and others added 5 commits October 2, 2025 10:07
Co-authored-by: Blade Barringer <blade@crookedneighbor.com>
Co-authored-by: Blade Barringer <blade@crookedneighbor.com>
@scarletcs
scarletcs merged commit 2ba17ff into main Oct 4, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants