chore(components): update post avatar to handle errors if no gravatar is found #5860

myrta2302 · 2025-07-23T13:23:38Z

📄 Description

This PR updates the <post-avatar> component to better handle cases where no Gravatar image is found, with the following:

The name initials are displayed by default before any image fetch.
The getImageByProp() function now first checks for a cached failed image url to avoid unnecessary fetch.
Introduces the storageKey as a combination of userid and email props to track changes and refresh the avatar accordingly.

📝 Checklist

✅ My code follows the style guidelines of this project
🛠️ I have performed a self-review of my own code
⚠️ My changes generate no new warnings or errors
✔️ New and existing unit tests pass locally with my changes

changeset-bot · 2025-07-23T13:23:42Z

🦋 Changeset detected

Latest commit: 03d002e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@swisspost/design-system-components	Patch
@swisspost/design-system-components-angular-workspace	Patch
@swisspost/design-system-components-react	Patch
@swisspost/design-system-documentation	Patch
@swisspost/design-system-components-angular	Patch
@swisspost/design-system-nextjs-integration	Patch
@swisspost/design-system-styles	Patch
@swisspost/design-system-tokens	Patch
@swisspost/design-system-icons	Patch
@swisspost/design-system-styles-primeng	Patch
@swisspost/internet-header	Patch
@swisspost/design-system-styles-primeng-workspace	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

swisspost-bot · 2025-07-23T13:26:47Z

Related Previews

https://preview-5860--swisspost-design-system-next.netlify.app

…-errors-if-no-gravatar-is-found

packages/components/src/components/post-avatar/post-avatar.tsx

…-errors-if-no-gravatar-is-found

oliverschuerch

The gravatar is not working anymore

…-errors-if-no-gravatar-is-found

oliverschuerch

Since it's working now, I'm fine with it generally.

However, I have two concerns:

It's not only fixing a bug, but adding features, therefore, please update the changeset file or split the pr into a bugfix and a feature (if possible).
Let @alizedebray review it as well, because I expect, she could be not fully ok with the change, since it is not exactly what she demanded for.

oliverschuerch · 2025-08-08T13:54:56Z

packages/components/cypress/e2e/avatar.cy.ts

+const GRAVATAR_DEFAULT = '404';
+const GRAVATAR_RATING = 'g';
+const GRAVATAR_SIZE = 80;
+
+function getGravatarUrl(email: string): string {
+  const hash = cryptify(email.trim().toLowerCase());
+  return `https://www.gravatar.com/avatar/${hash}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
+}
+
+async function cryptify(key: string) {
+  return await crypto.subtle.digest('SHA-256', new TextEncoder().encode(key)).then(buffer => {
+    return Array.from(new Uint8Array(buffer))
+      .map(bytes => bytes.toString(16).padStart(2, '0'))
+      .join('');
+  });
+}


It would be nice, if we could share these constants and logic somehow between the component and the e2e test.
For example store and export them in a dedicated file aside the post-avatar.tsx, so you can use the same source on both sides.

What about that topic? Is something not clear?
I can't see any change, nor any message, why we should not do this.

packages/components/cypress/e2e/avatar.cy.ts

packages/components/src/components/post-avatar/post-avatar.tsx

…-errors-if-no-gravatar-is-found

myrta2302 · 2025-08-26T15:02:48Z

Functionality Changes

Add AvatarStorage interface
Introduce @State() storageKey
Add a double watcher on two props (userId, email); when either changes:
a) Reset the image
b) Initialize storage to an empty object
c) Set avatar type to default (initials)
d) Call this.getAvatar() to fetch the image
On onSlotChange, update avatar type and perform related actions
Load avatar initials on componentWillLoad
Fetch avatar image on componentWillRender
Store fetch results (URL or error) in sessionStorage under the storage key
Session storage entries are never removed or reused to cache the already fetched keys (pairs of userId/email)

…-errors-if-no-gravatar-is-found

sonarqubecloud · 2025-09-02T05:14:17Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

oliverschuerch · 2025-09-02T06:39:38Z

packages/components/src/components/post-avatar/post-avatar.tsx

+    if (!imageResponse?.ok) {
+      return false;
+    }
+    if (imageResponse.ok) {
+      this.imageUrl = imageResponse.url;
+      this.imageAlt = `${this.firstname} ${this.lastname} avatar`;
+      this.avatarType = AvatarType.Image;
+      return true;


This should be an if/else statement.
if imageResponse.ok use it, else return false;

Or keep the return imageResponse.ok; as it was.

oliverschuerch · 2025-09-02T06:42:02Z

packages/components/src/components/post-avatar/post-avatar.tsx

-    this.slottedImage = this.host.querySelector('img');
-    this.getAvatar();
+  connectedCallback() {
+    this.getAvatarInitials();


Please add a comment in the code to explain, why this is necessary.

oliverschuerch · 2025-09-02T06:43:34Z

packages/components/src/components/post-avatar/post-avatar.tsx

  }

-  componentDidLoad() {
+  componentWillLoad() {


I think there was a reason, why we had to validate only on componentDidLoad.
Have a look into the other components to find out, if this change should be reverted.

oliverschuerch · 2025-09-02T06:44:05Z

packages/components/src/components/post-avatar/post-avatar.tsx

+      }
+    });
+    this.getAvatarImage();
+  }


Suggested change

}

}

oliverschuerch · 2025-09-02T06:46:32Z

packages/components/src/components/post-avatar/post-avatar.tsx

+    let imageResponse: Response;
+    try {


Suggested change

let imageResponse: Response;

try {

let imageResponse: Response;

try {

oliverschuerch · 2025-09-02T06:55:35Z

packages/components/src/components/post-avatar/post-avatar.tsx

Please add some empty lines between var definition and if statements which do not belong together, in getAvatarImage function, to improve readability.

oliverschuerch · 2025-09-02T07:06:50Z

packages/components/src/components/post-avatar/post-avatar.tsx

  @Watch('userid')
  validateUserid() {
    checkEmptyOrType(this, 'userid', 'string');
+    this.getAvatarImage();
  }

  @Watch('email')
  validateEmail() {
    if (this.email) checkEmptyOrPattern(this, 'email', emailPattern);
+    this.getAvatarImage();
  }


Leaving this as is, and calling the validateUserId and validateEmail function on componentWillLoad causes the getAvatarImage function to be called three times on startup.

In the connectedCallback (which is the only one that should be called initially)

In validateUserId triggered by componentWillLoad

In validateEmail triggered by componentWillLoad

Please make it possible to call the validation functions without triggering the getAvatarImage.

For example:

// like so, `updateUserId()` is only called when 'userid' gets an update @Watch('userid') updateUserid() { this.validateUserid(); this.getAvatarImage(); } // while the `validateUserid()` function can be called initially and when the `userid` chages private validateUserid() { checkEmtpyOrType(this, 'userid', 'string'); } connectedCallback() { // this should be the only inital call to `getAvatarImage()` this.getAvatarImage(); } componentDidLoad() { // initially only call the validation this.validateUserid(); }

oliverschuerch · 2025-09-02T07:13:38Z

packages/components/cypress/e2e/avatar.cy.ts

      cy.get('@avatar').find('img').should('not.exist');
      cy.get('@avatar').find('.initials').should('exist');
    });
+
+    it('should not show image bur fallback to initials, when slotted image is invalid', () => {


Suggested change

it('should not show image bur fallback to initials, when slotted image is invalid', () => {

it('should not show image but fallback to initials, when slotted image is invalid', () => {

oliverschuerch · 2025-09-02T07:14:10Z

packages/components/cypress/e2e/avatar.cy.ts

+        'append',
+        '<img src="/assets/images/invalid-image.svg" alt="Invalid image" />',
+      );
+      cy.get('@avatar').find('.initials').should('exist');


You should also check if the slotted image is not visible

oliverschuerch · 2025-09-02T07:17:23Z

packages/components/cypress/e2e/avatar.cy.ts

+const GRAVATAR_DEFAULT = '404';
+const GRAVATAR_RATING = 'g';
+const GRAVATAR_SIZE = 80;
+
+function getGravatarUrl(email: string): string {
+  const hash = cryptify(email.trim().toLowerCase());
+  return `https://www.gravatar.com/avatar/${hash}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
+}
+
+async function cryptify(key: string) {
+  return await crypto.subtle.digest('SHA-256', new TextEncoder().encode(key)).then(buffer => {
+    return Array.from(new Uint8Array(buffer))
+      .map(bytes => bytes.toString(16).padStart(2, '0'))
+      .join('');
+  });
+}


What about that topic? Is something not clear?
I can't see any change, nor any message, why we should not do this.

myrta2302 added 2 commits July 23, 2025 15:18

update <post-avatar> to handle error cases of gravatar fetch

3b58568

add changeset

baa8a96

myrta2302 linked an issue Jul 23, 2025 that may be closed by this pull request

[bug]: post-avatar is continuously logging errors if no gravatar is found #5814

Open

myrta2302 added 2 commits July 23, 2025 15:35

Merge branch 'main' into 5814-bug-post-avatar-is-continuously-logging…

0996383

…-errors-if-no-gravatar-is-found

Update dry-years-cheer.md

59ab239

myrta2302 marked this pull request as ready for review July 23, 2025 13:40

myrta2302 requested a review from a team as a code owner July 23, 2025 13:40

myrta2302 requested a review from alizedebray July 23, 2025 13:40

alizedebray requested changes Jul 24, 2025

View reviewed changes

myrta2302 added 4 commits July 25, 2025 12:17

Merge branch 'main' into 5814-bug-post-avatar-is-continuously-logging…

1e854ed

…-errors-if-no-gravatar-is-found

update to use common storageKey

b77d958

updated avatar to display initals by default and watch the common key

6155c70

update logic

9424f61

myrta2302 requested a review from alizedebray July 25, 2025 13:42

update e2e test

3fef2e5

alizedebray requested a review from oliverschuerch August 4, 2025 06:58

oliverschuerch requested changes Aug 8, 2025

View reviewed changes

myrta2302 and others added 4 commits August 14, 2025 14:50

Merge branch 'main' into 5814-bug-post-avatar-is-continuously-logging…

21414d2

…-errors-if-no-gravatar-is-found

review comments update

b7c2091

update to use cached image if exists

e4a0992

Merge branch 'main' into 5814-bug-post-avatar-is-continuously-logging…

b7facdc

…-errors-if-no-gravatar-is-found

myrta2302 requested a review from oliverschuerch August 18, 2025 13:30

Merge branch 'main' into 5814-bug-post-avatar-is-continuously-logging…

b059011

…-errors-if-no-gravatar-is-found

oliverschuerch requested changes Aug 19, 2025

View reviewed changes

alizedebray removed their request for review August 19, 2025 14:57

Merge branch 'main' into 5814-bug-post-avatar-is-continuously-logging…

1a24435

…-errors-if-no-gravatar-is-found

remove session storage logic

ed0b312

myrta2302 added 2 commits August 29, 2025 11:21

review comments update and slotted fallback to initials

49f1f70

updated avatar e2e test

b431891

myrta2302 requested a review from oliverschuerch August 29, 2025 11:01

myrta2302 modified the milestone: v10.0.0 Release Sep 1, 2025

Merge branch 'main' into 5814-bug-post-avatar-is-continuously-logging…

03d002e

…-errors-if-no-gravatar-is-found

oliverschuerch requested changes Sep 2, 2025

View reviewed changes

	it('should not show image bur fallback to initials, when slotted image is invalid', () => {
	it('should not show image but fallback to initials, when slotted image is invalid', () => {

chore(components): update post avatar to handle errors if no gravatar is found #5860

Are you sure you want to change the base?

chore(components): update post avatar to handle errors if no gravatar is found #5860

Conversation

myrta2302 commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📄 Description

📝 Checklist

Uh oh!

changeset-bot bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

swisspost-bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

oliverschuerch left a comment

Choose a reason for hiding this comment

Uh oh!

oliverschuerch left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

myrta2302 commented Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sonarqubecloud bot commented Sep 2, 2025

Quality Gate passed

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliverschuerch Sep 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

myrta2302 commented Jul 23, 2025 •

edited

Loading

changeset-bot bot commented Jul 23, 2025 •

edited

Loading

swisspost-bot commented Jul 23, 2025 •

edited

Loading

myrta2302 commented Aug 26, 2025 •

edited

Loading

oliverschuerch Sep 2, 2025 •

edited

Loading