Avatars: Load static avatar images first in user-preview element

Sanitize animated images can take a long time (a few seconds). Load static versions first in Personalization app to provide a smooth user experience. Also update to not show placeholder image if the user state is not provided yet. (Otherwise there will be a flash of the placeholder image before the actual image loads) Without the change: https://drive.google.com/file/d/14sA9pSqGLDqNbcXUsaeJh4erCsEOkN0C/view?usp=sharing&resourcekey=0-SWiaQnaI-4sbblB8GbR8Lw With the change: https://drive.google.com/file/d/1UIh5wYDq48Xn7iAYS5OczavtZBrjYk2V/view?usp=sharing&resourcekey=0-bSqWlCldlPvpqDuJTyGFpw Bug: b/255995788 Test: Local build Change-Id: I3d574a64702cd0a8ed0868039c589883885f2e81 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3996023 Reviewed-by: Jason Thai <jasontt@chromium.org> Commit-Queue: Yue Li <updowndota@chromium.org> Cr-Commit-Position: refs/heads/main@{#1067332}
chromium · Nov 4, 2022 · ead6d12 · ead6d12
1 parent 1ab2ea9
commit ead6d12
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 9 deletions.
diff --git a/ash/webui/personalization_app/resources/js/user/user_preview_element.html b/ash/webui/personalization_app/resources/js/user/user_preview_element.html
@@ -15,6 +15,22 @@
     position: relative;
   }
 
+  #imageBorderContainer {
+    background-color: var(--personalization-app-grid-item-background-color);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 50%;
+    height: 80px;
+    width: 80px;
+  }
+
+  #imageContainer #imageBorderContainer img {
+    background-size: 80px 80px;
+    border: 0;
+    border-radius: 50%;
+    height: 80px;
+    width: 80px;
+  }
+
   #imageContainer img {
     border: 1px solid rgba(0, 0, 0, 0.08);
     border-radius: 50%;
@@ -152,11 +168,14 @@
           </svg>
         </div>
         <paper-ripple class="circle"></paper-ripple>
-        <img tabindex="0" id="avatar" class="clickable" src$="[[imageUrl_.url]]"
-            alt$="[[getImageAlt_(image_)]]"
-            role="button"
-            on-click="onClickUserSubpageLink_"
-            on-keypress="onClickUserSubpageLink_">
+        <div id="imageBorderContainer">
+          <img tabindex="0" id="avatar" class="clickable" src$="[[imageUrl_.url]]"
+              alt$="[[getImageAlt_(image_)]]"
+              role="button"
+              on-click="onClickUserSubpageLink_"
+              on-keypress="onClickUserSubpageLink_"
+              style$="[[getImgBackgroudStyle_(imageUrl_.url)]]">
+        </div>
       </template>
       <template is="dom-if"
           if="[[shouldShowSubpageView_(path, imageIsEnterpriseManaged_)]]">

diff --git a/ash/webui/personalization_app/resources/js/user/user_preview_element.ts b/ash/webui/personalization_app/resources/js/user/user_preview_element.ts
@@ -140,6 +140,20 @@ export class UserPreview extends WithPersonalizationStore {
     return '';
   }
 
+  /**
+   * Creates style string with static background image url for default user
+   * images . Static image loads faster and will provide a smooth experience
+   * when the animated image complete loading.
+   */
+  private getImgBackgroudStyle_(url: Url|null): string {
+    // Only add background image for default user images.
+    if (!this.image_ || this.image_.invalidImage || !this.image_.defaultImage) {
+      return '';
+    }
+
+    return `background-image: url('` + url + `&staticEncode=true')`;
+  }
+
   private shouldShowDeprecatedImageSourceInfo_(image: UserImage|null): boolean {
     return !!image && !!image.defaultImage && !!image.defaultImage.sourceInfo &&
         isNonEmptyArray(image.defaultImage.sourceInfo.author.data) &&

diff --git a/ash/webui/personalization_app/resources/js/user/user_selectors.ts b/ash/webui/personalization_app/resources/js/user/user_selectors.ts
@@ -69,7 +69,7 @@ export function selectUserImageUrl(state: PersonalizationState): Url|null {
   };
 
   if (!userImage) {
-    return placeHolderUrl;
+    return null;
   }
 
   // Generated types for |userImage| are incorrect for mojom unions. Only one

diff --git a/chrome/test/data/webui/chromeos/personalization_app/user_preview_element_test.ts b/chrome/test/data/webui/chromeos/personalization_app/user_preview_element_test.ts
@@ -114,15 +114,15 @@ suite('UserPreviewTest', function() {
         'blob url is shown for external image');
   });
 
-  test('displays placeholder image if user image is unavailable', async () => {
+  test('do not display image if user image is not ready yet', async () => {
     userPreviewElement = initElement(UserPreview, {path: Paths.ROOT});
     await waitAfterNextRender(userPreviewElement!);
 
     const avatarImage = userPreviewElement!.shadowRoot!.getElementById(
                             'avatar') as HTMLImageElement;
     assertEquals(
-        'chrome://theme/IDR_PROFILE_AVATAR_PLACEHOLDER_LARGE', avatarImage.src,
-        'placeholder image is shown if user image is unavailable');
+        null, avatarImage,
+        'do not display image if user image is not ready yet');
   });
 
   test('displays placeholder image if user image is invalid', async () => {