personalization: implement loading state for albums subpage

Implement the loading state for albums subpage. When loadingAlbums status is not completed, fill the albums container with loading tiles. Loading state screenshot: https://screenshot.googleplex.com/6cfQU7QvTf86mnR Transition screenshot: https://screenshot.googleplex.com/5JbL8dPhJetk84H BUG=b/223842743 TEST= --gtest_filter= "*PersonalizationAppComponentBrowserTest*" Cq-Include-Trybots: luci.chrome.try:linux-chromeos-chrome Change-Id: Ie3c605e7f0dc052c3dba1649ced2a6c426f2189a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3544240 Reviewed-by: Jason Thai <jasontt@chromium.org> Reviewed-by: Jeffrey Young <cowmoo@chromium.org> Commit-Queue: Thuong Phan <thuongphan@chromium.org> Cr-Commit-Position: refs/heads/main@{#990045}
chromium · Apr 7, 2022 · b62a192 · b62a192
1 parent c77a4b2
commit b62a192
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 35 deletions.
diff --git a/ash/webui/personalization_app/resources/trusted/ambient/album_list_element.html b/ash/webui/personalization_app/resources/trusted/ambient/album_list_element.html
@@ -1,13 +1,6 @@
 <style include="trusted-style common-style">
   :host {
-    overflow: hidden
-  }
-
-  paper-spinner-lite {
-    display: block;
-    height: 28px;
-    margin: 150px auto;
-    width: 28px;
+    overflow: hidden;
   }
 
   iron-list {

diff --git a/ash/webui/personalization_app/resources/trusted/ambient/albums_subpage_element.html b/ash/webui/personalization_app/resources/trusted/ambient/albums_subpage_element.html
@@ -1,27 +1,60 @@
-<style include="cr-shared-style">
-  #pageDescription {
+<style include="cr-shared-style common-style">
+  :host {
+    height: 100%;
+  }
+
+  #pageDescription,
+  #descPlaceholderContainer {
     display: flex;
     margin-inline-start: 8px;
     min-height: 32px;
   }
-  paper-spinner-lite {
-    display: block;
-    height: 28px;
-    margin: 150px auto;
-    width: 28px;
+
+  #descriptionPlaceholder {
+    height: 20px;
+    width: 50%;
+  }
+
+  #albumsPlaceholderContainer {
+    display: grid;
+    gap: calc(var(--personalization-app-grid-item-spacing)) calc(var(--personalization-app-grid-item-spacing) / 2);
+    grid-template-columns: repeat(3, 1fr 0.34px);
+    grid-template-rows: repeat(auto-fit, calc(var(--personalization-app-grid-item-height)));
+    height: 100%;
+    overflow: hidden;
+    padding: calc(var(--personalization-app-grid-item-spacing) / 2);
+  }
+
+  @media(min-width: 720px) {
+    #albumsPlaceholderContainer {
+      grid-template-columns: repeat(4, 1fr 0.25px);
+    }
+  }
+
+  #albumItemPlaceholder {
+    height: 100%;
+    position: relative;
+    width: 100%;
   }
 </style>
 <template is="dom-if" if="[[shouldShowContent_(ambientModeEnabled_)]]">
-  <localized-link id="pageDescription"
-      localized-string="[[getTitleInnerHtml_(topicSource)]]">
-  </localized-link>
-
-  <template is="dom-if" if="[[loadingAlbums_(albums)]]">
-    <!-- TODO(b/217311018): Add loading state -->
-    <paper-spinner-lite active></paper-spinner-lite>
+  <template is="dom-if" if="[[loadingAlbums_(albums, topicSource)]]">
+    <div id="descPlaceholderContainer">
+      <div id="descriptionPlaceholder" class="placeholder"></div>
+    </div>
+    <div id="albumsPlaceholderContainer">
+      <template is="dom-repeat" items="[[getLoadingTiles_()]]">
+        <div id="albumItemPlaceholder" class="placeholder"></div>
+        <div class="filler"></div>
+      </template>
+    </div>
   </template>
 
-  <template is="dom-if" if="[[!loadingAlbums_(albums)]]">
+  <template is="dom-if" if="[[!loadingAlbums_(albums, topicSource)]]">
+    <localized-link id="pageDescription"
+        localized-string="[[getTitleInnerHtml_(topicSource)]]">
+    </localized-link>
+
     <!-- Only Google Photos may not have albums -->
     <template is="dom-if" if="[[showNoGoogleAlbums_(topicSource, albums)]]">
       <localized-link class="cr-row first"

diff --git a/ash/webui/personalization_app/resources/trusted/ambient/albums_subpage_element.ts b/ash/webui/personalization_app/resources/trusted/ambient/albums_subpage_element.ts
@@ -10,23 +10,27 @@
 import 'chrome://resources/cr_components/localized_link/localized_link.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
-import 'chrome://resources/polymer/v3_0/paper-spinner/paper-spinner-lite.js';
 import './album_list_element.js';
 import './art_album_dialog_element.js';
+import '../../common/styles.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 
-import {isNonEmptyArray} from '../../common/utils.js';
+import {getNumberOfGridItemsPerRow, isNonEmptyArray} from '../../common/utils.js';
 import {AmbientModeAlbum, TopicSource} from '../personalization_app.mojom-webui.js';
 import {PersonalizationRouter} from '../personalization_router_element.js';
 import {WithPersonalizationStore} from '../personalization_store.js';
+import {getZerosArray} from '../utils.js';
 
 import {AlbumSelectedChangedEvent} from './album_list_element.js';
 import {getTemplate} from './albums_subpage_element.html.js';
 import {setAlbumSelected} from './ambient_controller.js';
 import {getAmbientProvider} from './ambient_interface_provider.js';
 import {AmbientObserver} from './ambient_observer.js';
 
+/** Height in pixels of a tile. */
+const kTileHeightPx = 136;
+
 export class AlbumsSubpage extends WithPersonalizationStore {
   static get is() {
     return 'albums-subpage';
@@ -51,12 +55,13 @@ export class AlbumsSubpage extends WithPersonalizationStore {
       showArtAlbumDialog_: {
         type: Boolean,
         value: false,
-      }
+      },
     };
   }
 
   topicSource: TopicSource;
   albums: AmbientModeAlbum[]|null = null;
+  loadingAlbums: boolean;
 
   private ambientModeEnabled_: boolean|null;
   private showArtAlbumDialog_: boolean;
@@ -87,8 +92,17 @@ export class AlbumsSubpage extends WithPersonalizationStore {
     }
   }
 
+  /**
+   * List of loading tiles to be displayed to the user when albums are loading.
+   */
+  private getLoadingTiles_(): number[] {
+    const x = getNumberOfGridItemsPerRow();
+    const y = Math.floor(this.offsetHeight / kTileHeightPx);
+    return getZerosArray(x * y);
+  }
+
   private loadingAlbums_(): boolean {
-    return this.albums === null;
+    return this.albums === null || this.topicSource === null;
   }
 
   private showNoGoogleAlbums_(): boolean {

diff --git a/ash/webui/personalization_app/resources/trusted/ambient/ambient_subpage_element.html b/ash/webui/personalization_app/resources/trusted/ambient/ambient_subpage_element.html
@@ -1,4 +1,10 @@
 <style include="common-style">
+  :host {
+    flex-grow: 1;
+  }
+  #container {
+    height: 100%;
+  }
   #mainSettings {
     display: grid;
     grid-template-areas:
@@ -41,6 +47,7 @@
       '. . albums-subpage . .';
     grid-template-columns: 1fr 16px minmax(568px, 920px) 16px 1fr;
     grid-template-rows: auto;
+    height: 100%;
     position: relative;
     width: 100%;
   }

diff --git a/chrome/test/data/webui/chromeos/personalization_app/ambient_subpage_element_test.ts b/chrome/test/data/webui/chromeos/personalization_app/ambient_subpage_element_test.ts
@@ -8,7 +8,7 @@ import 'chrome://webui-test/mojo_webui_test_support.js';
 import {AlbumsSubpage, AmbientActionName, AmbientModeAlbum, AmbientObserver, AmbientSubpage, AnimationTheme, AnimationThemeItem, emptyState, Paths, PersonalizationRouter, SetAlbumsAction, SetAmbientModeEnabledAction, SetAnimationThemeAction, SetTemperatureUnitAction, SetTopicSourceAction, TemperatureUnit, TopicSource, TopicSourceItem, WallpaperGridItem} from 'chrome://personalization/trusted/personalization_app.js';
 import {CrRadioButtonElement} from 'chrome://resources/cr_elements/cr_radio_button/cr_radio_button.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
-import {assertDeepEquals, assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
+import {assertDeepEquals, assertEquals, assertFalse, assertNotEquals, assertTrue} from 'chrome://webui-test/chai_assert.js';
 import {TestBrowserProxy} from 'chrome://webui-test/test_browser_proxy.js';
 import {waitAfterNextRender} from 'chrome://webui-test/test_util.js';
 
@@ -462,7 +462,7 @@ suite('AmbientSubpageTest', function() {
         await reloadCalledPromise;
       });
 
-  test('has spinner when no albums on albums subpage', async () => {
+  test('show placeholders when no albums on albums subpage', async () => {
     ambientSubpageElement = initElement(AmbientSubpage, {
       path: Paths.AmbientAlbums,
       queryParams: {topicSource: TopicSource.kGooglePhotos}
@@ -477,9 +477,15 @@ suite('AmbientSubpageTest', function() {
     assertFalse(albumsSubpage.hidden);
     await waitAfterNextRender(albumsSubpage);
 
-    let spinner = albumsSubpage.shadowRoot!.querySelector('paper-spinner-lite');
-    assertTrue(!!spinner);
-    assertTrue(spinner.active);
+    const descPlaceholder =
+        albumsSubpage.shadowRoot!.querySelector('#descPlaceholderContainer');
+    assertTrue(!!descPlaceholder);
+    assertNotEquals(getComputedStyle(descPlaceholder).display, 'none');
+
+    const albumsPlaceholder =
+        albumsSubpage.shadowRoot!.querySelector('#albumsPlaceholderContainer');
+    assertTrue(!!albumsPlaceholder);
+    assertNotEquals(getComputedStyle(albumsPlaceholder).display, 'none');
 
     personalizationStore.data.ambient.albums = ambientProvider.albums;
     personalizationStore.data.ambient.topicSource = TopicSource.kGooglePhotos;
@@ -488,9 +494,11 @@ suite('AmbientSubpageTest', function() {
     personalizationStore.notifyObservers();
     await waitAfterNextRender(albumsSubpage);
 
-    spinner = albumsSubpage.shadowRoot!.querySelector('paper-spinner-lite');
-    assertTrue(!!spinner);
-    assertEquals(getComputedStyle(spinner).display, 'none');
+    assertTrue(!!descPlaceholder);
+    assertEquals(getComputedStyle(descPlaceholder).display, 'none');
+
+    assertTrue(!!albumsPlaceholder);
+    assertEquals(getComputedStyle(albumsPlaceholder).display, 'none');
   });
 
   test('has correct albums on Google Photos albums subpage', async () => {