personalization: implement loading state for ambient subpage

Implement the loading state for ambient subpage. When loadingSettings status (including albums, temperature unit and topic source) is not completed, show placeholders for images and texts. Screenshot: https://screenshot.googleplex.com/EqPbVJy972LhTJz.png Loading state for albums subpage will be updated in a separate CL. BUG=b/223842743 TEST= --gtest_filter= "*PersonalizationAppComponentBrowserTest*" Change-Id: Ia8d046a1372a6dcb6207e4ee3503f090eba1a825 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3556181 Reviewed-by: Jeffrey Young <cowmoo@chromium.org> Reviewed-by: Jason Thai <jasontt@chromium.org> Commit-Queue: Thuong Phan <thuongphan@chromium.org> Cr-Commit-Position: refs/heads/main@{#987157}
chromium · Mar 30, 2022 · bee7dc3 · bee7dc3
1 parent d73c903
commit bee7dc3
Show file tree

Hide file tree

Showing 12 changed files with 223 additions and 68 deletions.
diff --git a/ash/webui/personalization_app/resources/common/styles.html b/ash/webui/personalization_app/resources/common/styles.html
@@ -262,5 +262,11 @@
       width: 33%;
       height: 20px;
     }
+
+    .ambient-subpage-element-title {
+      color: var(--cros-text-color-primary);
+      font: var(--personalization-app-label-font);
+      margin: 34px 8px 16px 8px;
+    }
   </style>
 </template>
diff --git a/ash/webui/personalization_app/resources/trusted/ambient/ambient_preview_element.html b/ash/webui/personalization_app/resources/trusted/ambient/ambient_preview_element.html
@@ -52,7 +52,8 @@
     display: block;
   }
 
-  :host([main-page]) #imageContainer {
+  :host([main-page]) #imageContainer,
+  :host([main-page]) #imagePlaceholder {
     display: flex;
     height: 100%;
     justify-self: center;
@@ -99,19 +100,24 @@
     opacity: var(--cros-disabled-opacity);
   }
 
-  :host(:not([main-page])) #collageContainer {
+  :host(:not([main-page])) #collageContainer,
+  :host(:not([main-page])) #collagePlaceholder {
     display: none;
   }
 
-  :host([main-page]) #collageContainer {
-    border: 1px solid rgba(0, 0, 0, 0.08);
+  :host([main-page]) #collageContainer,
+  :host([main-page]) #collagePlaceholder {
     border-radius: 12px;
     display: grid;
     gap: 2px;
     grid-area: collage;
     overflow: hidden;
   }
 
+  :host([main-page]) #collageContainer {
+    border: 1px solid rgba(0, 0, 0, 0.08);
+  }
+
   #collageContainer {
     grid-template-columns: repeat(2, minmax(0,1fr));
     grid-template-rows: repeat(2, minmax(0,1fr));
@@ -143,6 +149,7 @@
       <div class="placeholder"></div>
       <div class="placeholder"></div>
     </div>
+    <div id="collagePlaceholder" class="placeholder"></div>
   </template>
   <template is="dom-if" if="[[!loading_]]">
     <template is="dom-if" if="[[!ambientModeEnabled_]]">
@@ -157,14 +164,8 @@
       </div>
     </template>
     <template is="dom-if" if="[[ambientModeEnabled_]]">
-      <template is="dom-if" if="[[!previewAlbums_]]">
-        <div id="imagePlaceholder" class="placeholder"></div>
-        <div id="textPlaceholder" class="preview-text-placeholder album-info-mainpage album-info-subpage">
-          <div class="placeholder currently-set-text"></div>
-          <div class="placeholder"></div>
-          <div class="placeholder"></div>
-        </div>
-      </template>
+      <!-- TODO(b/226235802) - Add failed/error state when no previewAlbums available.
+           Currently, we show blank containers -->
       <template is="dom-if" if="[[previewAlbums_]]">
         <div id="imageContainer" class="preview-image-container" aria-hidden="true">
           <img class="preview-image" is="cr-auto-img"

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,10 +1,9 @@
-<style>
+<style include="common-style">
   #mainSettings {
     display: grid;
     grid-template-areas:
       '. . toggles   . .'
       '. . zeroState . .'
-      '. . spinner   . .'
       '. . preview   . .'
       '. . animation . .'
       '. . sources   . .'
@@ -19,26 +18,21 @@
   ambient-zero-state {
     grid-area: zeroState;
   }
-  paper-spinner-lite {
-    grid-area: spinner;
-    height: 28px;
-    margin: 100px auto;
-    width: 28px;
-  }
   ambient-preview {
     grid-area: preview;
     margin: 20px 8px 0 8px;
   }
-  animation-theme-list {
+  animation-theme-list,
+  #animationThemePlaceholder {
     grid-area: animation;
   }
-  topic-source-list {
+  topic-source-list,
+  #topicSourcePlaceholder {
     grid-area: sources;
-    margin: 0 8px;
   }
-  ambient-weather-unit {
+  ambient-weather-unit,
+  #weatherUnitPlaceholder {
     grid-area: weather;
-    margin: 0 8px 48px 8px;
   }
   #albumsSubpage {
     display: grid;
@@ -52,6 +46,73 @@
   albums-subpage {
     grid-area: albums-subpage;
   }
+  iron-list {
+    height: 100%;
+    overflow: hidden;
+    width: 100%;
+  }
+  .animation-placeholder-container {
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: calc(var(--personalization-app-grid-item-spacing) / 2);
+    /* Subtract 0.34px to fix subpixel rounding issues with iron-list. This
+     * ensures all grid items in a row add up to at least 1px smaller than the
+     * parent width. */
+    width: calc(100% / 3 - 0.34px);
+  }
+  @media(min-width: 720px) {
+    .animation-placeholder-container {
+      /* Subtract 0.25px to fix subpixel rounding issues with iron-list. This
+       * ensures all grid items in a row add up to at least 1px smaller than the
+       * parent width. */
+      width: calc(100% / 4 - 0.25px) !important;
+    }
+  }
+  .animation-item-placeholder {
+    align-items: center;
+    border-radius: var(--personalization-app-grid-item-border-radius);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    height: 156px;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+  .animation-item-title-placeholder {
+    margin-top: 8px;
+  }
+  div[class^='ambient-text-placeholder'] {
+    align-items: flex-start;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    padding-inline: var(--cr-section-padding) var(--cr-icon-ripple-padding); 
+    width: 100%;
+  }
+  #topicSourceTextPlaceholder {
+    height: 64px;
+  }
+  #weatherUnitTextPlaceholder {
+    height: 48px;
+  }
+  .ambient-text-placeholder-0 {
+    border-bottom: 1px solid var(--cros-separator-color);
+  }
+  div[class^='ambient-text-placeholder'] > * + * {
+    margin-top: 8px;
+  }
+  .ambient-primary-text-placeholder {
+    height: 20px;
+    width: 75%;
+  }
+  .ambient-secondary-text-placeholder {
+    height: 20px;
+    width: 50%;
+  }
 </style>
 <div id="container">
   <template is="dom-if" if="[[shouldShowMainSettings_(path)]]">
@@ -60,13 +121,49 @@
           on-click="onClickAmbientModeButton_" on-change="onToggleStateChanged_">
       </toggle-row>
       <template is="dom-if" if="[[ambientModeEnabled_]]">
+        <ambient-preview></ambient-preview>
         <template is="dom-if" if="[[loadingSettings_]]">
-          <!-- TODO(b/217311018): Add loading state -->
-          <paper-spinner-lite active></paper-spinner-lite>
+          <div id="animationThemePlaceholder">
+            <h3 id="animationTitle" class="ambient-subpage-element-title" aria-hidden="true">
+              $i18n{ambientModeAnimationTitle}
+            </h3>
+            <iron-list items="[[getPlaceholders_(3)]]" grid>
+              <template>
+                <div class="animation-placeholder-container">
+                  <div class="animation-item-placeholder placeholder"></div>
+                  <div class="animation-item-title-placeholder 
+                      ambient-primary-text-placeholder placeholder"></div>
+                </div>
+              </template>
+            </iron-list>
+          </div>
+          <div id="topicSourcePlaceholder">
+            <h3 id="topicSourceTitle" class="ambient-subpage-element-title" aria-hidden="true">
+              $i18n{ambientModeTopicSourceTitle}
+            </h3>
+            <iron-list items="[[getPlaceholders_(2)]]" grid>
+              <template>
+                  <div id="topicSourceTextPlaceholder" class$="{{getClassContainer_(index)}}">
+                    <div class="ambient-primary-text-placeholder placeholder"></div>
+                    <div class="ambient-secondary-text-placeholder placeholder"></div>
+                  </div>
+              </template>
+            </iron-list>
+          </div>
+          <div id="weatherUnitPlaceholder">
+            <h3 id="weatherTitle" class="ambient-subpage-element-title" aria-hidden="true">
+              $i18n{ambientModeWeatherTitle}
+            </h3>
+            <iron-list items="[[getPlaceholders_(2)]]" grid>
+              <template>
+                <div id="weatherUnitTextPlaceholder" class$="{{getClassContainer_(index)}}">
+                  <div class="ambient-secondary-text-placeholder placeholder"></div>
+                </div>
+              </template>
+            </iron-list>
+          </div>
         </template>
-
         <template is="dom-if" if="[[!loadingSettings_]]">
-          <ambient-preview></ambient-preview>
           <animation-theme-list selected-animation-theme="[[animationTheme_]]"
               disabled$="[[disabled_]]">
           </animation-theme-list>

diff --git a/ash/webui/personalization_app/resources/trusted/ambient/ambient_subpage_element.ts b/ash/webui/personalization_app/resources/trusted/ambient/ambient_subpage_element.ts
@@ -7,7 +7,7 @@
  * the ambient mode settings.
  */
 
-import 'chrome://resources/polymer/v3_0/paper-spinner/paper-spinner-lite.js';
+import '../../common/styles.js';
 import './albums_subpage_element.js';
 import './ambient_weather_element.js';
 import './ambient_preview_element.js';
@@ -18,6 +18,7 @@ import './topic_source_list_element.js';
 import {AmbientModeAlbum, AnimationTheme, TemperatureUnit, TopicSource} from '../personalization_app.mojom-webui.js';
 import {Paths} from '../personalization_router_element.js';
 import {WithPersonalizationStore} from '../personalization_store.js';
+import {getZerosArray} from '../utils.js';
 
 import {setAmbientModeEnabled} from './ambient_controller.js';
 import {getAmbientProvider} from './ambient_interface_provider.js';
@@ -147,6 +148,14 @@ export class AmbientSubpage extends WithPersonalizationStore {
   private computeDisabled_(): boolean {
     return this.ambientModeEnabled_ !== null && !this.ambientModeEnabled_;
   }
+
+  private getPlaceholders_(x: number): number[] {
+    return getZerosArray(x);
+  }
+
+  private getClassContainer_(x: number): string {
+    return `ambient-text-placeholder-${x}`;
+  }
 }
 
 customElements.define(AmbientSubpage.is, AmbientSubpage);
diff --git a/ash/webui/personalization_app/resources/trusted/ambient/ambient_weather_element.html b/ash/webui/personalization_app/resources/trusted/ambient/ambient_weather_element.html
@@ -1,10 +1,4 @@
-<style>
-  #weatherTitle {
-    color: var(--cros-text-color-primary);
-    font: var(--personalization-app-label-font);
-    margin-bottom: 16px;
-    margin-top: 34px;
-  }
+<style include="common-style">
   cr-radio-group {
     width: 100%;
   }
@@ -17,7 +11,7 @@
   }
 </style>
 <div id="weatherDiv">
-  <h3 id="weatherTitle" aria-hidden="true">
+  <h3 class="ambient-subpage-element-title" aria-hidden="true">
     $i18n{ambientModeWeatherTitle}
   </h3>
   <div class="weather-unit-list">

diff --git a/ash/webui/personalization_app/resources/trusted/ambient/ambient_weather_element.ts b/ash/webui/personalization_app/resources/trusted/ambient/ambient_weather_element.ts
@@ -7,6 +7,7 @@
  * behaviors similar to a radio button group, e.g. single selection.
  */
 
+import '../../common/styles.js';
 import 'chrome://resources/cr_elements/cr_radio_button/cr_radio_button.m.js';
 import 'chrome://resources/cr_elements/cr_radio_group/cr_radio_group.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';

diff --git a/ash/webui/personalization_app/resources/trusted/ambient/animation_theme_list_element.html b/ash/webui/personalization_app/resources/trusted/ambient/animation_theme_list_element.html
@@ -1,9 +1,4 @@
-<style>
-  #animationTitle {
-    color: var(--cros-text-color-primary);
-    font: var(--personalization-app-label-font);
-    margin: 34px 8px 16px 8px;
-  }
+<style include="common-style">
   #animationThemeList {
     display: flex;
     flex-direction: row;
@@ -14,7 +9,7 @@
   }
 </style>
 
-<h3 id="animationTitle" aria-hidden="true">
+<h3 class="ambient-subpage-element-title" aria-hidden="true">
   $i18n{ambientModeAnimationTitle}
 </h3>
 <iron-list id="grid" items="[[animationThemes]]" as="theme" grid>

diff --git a/ash/webui/personalization_app/resources/trusted/ambient/animation_theme_list_element.ts b/ash/webui/personalization_app/resources/trusted/ambient/animation_theme_list_element.ts
@@ -6,6 +6,7 @@
  * @fileoverview The element for displaying a list of animation themes.
  */
 import './animation_theme_item_element.js';
+import '../../common/styles.js';
 
 import {AnimationTheme} from '../personalization_app.mojom-webui.js';
 import {WithPersonalizationStore} from '../personalization_store.js';

diff --git a/ash/webui/personalization_app/resources/trusted/ambient/topic_source_list_element.html b/ash/webui/personalization_app/resources/trusted/ambient/topic_source_list_element.html
@@ -1,11 +1,4 @@
-<style>
-  #topicSourceTitle {
-    color: var(--cros-text-color-primary);
-    font: var(--personalization-app-label-font);
-    margin-bottom: 16px;
-    margin-top: 34px;
-  }
-
+<style include="common-style">
   topic-source-item {
     align-items: center;
     height: 64px;
@@ -20,7 +13,7 @@
   }
 </style>
 
-<h3 id="topicSourceTitle" aria-hidden="true">
+<h3 class="ambient-subpage-element-title" aria-hidden="true">
   $i18n{ambientModeTopicSourceTitle}
 </h3>
 

diff --git a/ash/webui/personalization_app/resources/trusted/ambient/topic_source_list_element.ts b/ash/webui/personalization_app/resources/trusted/ambient/topic_source_list_element.ts
@@ -7,6 +7,7 @@
  * behaviors similar to a radio button group, e.g. single selection.
  */
 
+import '../../common/styles.js';
 import './topic_source_item_element.js';
 import 'chrome://resources/polymer/v3_0/iron-list/iron-list.js';
 

diff --git a/ash/webui/personalization_app/resources/trusted/utils.ts b/ash/webui/personalization_app/resources/trusted/utils.ts
@@ -123,3 +123,10 @@ export function getTopicSourceName(topicSource: TopicSource): string {
       return '';
   }
 }
+
+/**
+ * Returns a x-length dummy array of zeros (0s)
+ */
+export function getZerosArray(x: number): number[] {
+  return new Array(x).fill(0);
+}