fix laggy paper-ripple animation in the navigation toolbar (developer…

…-preview) See googlearchive/paper-ripple#10 for details on the paper-ripple issue. At the moment it looks like the easiest way to work it around is to let the animation finish (smoothly) before initiating a navigation that consumes CPU and makes the animation appear laggy when running in parallel. Jira: BFF-207
vaadin · Sep 28, 2017 · d7ff653 · d7ff653
1 parent 1d1ad5a
commit d7ff653
Showing 4 changed files with 39 additions and 13 deletions.
diff --git a/src/main/java/com/vaadin/starter/bakery/ui/BakeryNavigation.java b/src/main/java/com/vaadin/starter/bakery/ui/BakeryNavigation.java
@@ -116,6 +116,13 @@ private void setupNavigationButtons() {
 		getModel().setPages(pages);
 	}
 
+	@ClientDelegate
+	private void navigateTo(String href) {
+		if (href != null) {
+			getUI().ifPresent(ui -> ui.navigateTo(href));
+		}
+	}
+
 	@ClientDelegate
 	private void logout() {
 		UI ui = getUI().get();

diff --git a/src/main/webapp/src/app/bakery-navigation.html b/src/main/webapp/src/app/bakery-navigation.html
@@ -47,7 +47,7 @@
         height: 100%;
       }
 
-      paper-tab a {
+      .navigation-label {
         /* These mixins (from iron-flex-layout) center the link text. */
         @apply --layout-vertical;
         @apply --layout-center-center;
@@ -62,11 +62,11 @@
         margin-bottom: var(--valo-space-xs);
       }
 
-      paper-tab.iron-selected a iron-icon {
+      paper-tab.iron-selected iron-icon {
         color: var(--valo-primary-color);
       }
 
-      paper-tab.iron-selected a span {
+      paper-tab.iron-selected span {
         color: var(--valo-body-text-color);
       }
 
@@ -116,7 +116,7 @@
           padding: 0 var(--valo-space-m);
         }
 
-        paper-tab a {
+        .navigation-label {
           padding: 0 var(--valo-space-xs);
         }
 
@@ -130,13 +130,13 @@
       }
 
       @media (min-width: 740px) {
-        paper-tab a {
+        .navigation-label {
           padding: 0 var(--valo-space-m);
         }
       }
 
       @media (min-width: 920px) {
-        paper-tab a {
+        .navigation-label {
           padding: 0 var(--valo-space-l);
         }
       }
@@ -152,13 +152,14 @@
           Sunshine
         </div>
 
-        <paper-tabs selected="[[page]]" attr-for-selected="page-id" class="navigation-tabs" align-bottom="[[_desktopView]]">
+        <paper-tabs selected="[[page]]" attr-for-selected="page-id" on-transitionend="_onNavAnimationEnd"
+                    class="navigation-tabs" align-bottom="[[_desktopView]]">
           <template is="dom-repeat" items="[[pages]]">
-            <paper-tab page-id="[[item.link]]">
-              <a router-link href="[[item.link]]">
+            <paper-tab page-id$="[[item.link]]">
+              <div class="navigation-label">
                 <iron-icon icon="valo:[[item.icon]]"></iron-icon>
                 <span>[[item.title]]</span>
-              </a>
+              </div>
             </paper-tab>
           </template>
         </paper-tabs>
@@ -225,6 +226,23 @@
       _logout() {
         this.$server.logout();
       }
+
+      // Navigation should be implemented with plain <a router-link href="..."></a> elements.
+      // However, when done that way it causes the paper-ripple animation on the navigation paper-tabs to be laggy
+      // (see https://github.com/Polymer/paper-ripple/issues/10 for details).
+      // Hence this workaround: wait for the paper-ripple animation to finish, and then trigger navigation manually.
+      _onNavAnimationEnd(event) {
+        const pageId = event.target.getAttribute('page-id');
+        this._debouncer = Polymer.Debouncer.debounce(
+          this._debouncer,
+          Polymer.Async.timeOut.after(30),
+          () => {
+            if (this.page !== pageId) {
+              this.$server.navigateTo(pageId);
+            }
+          }
+        );
+      }
     }
 
     window.customElements.define(BakeryNavigation.is, BakeryNavigation);

diff --git a/src/test/java/com/vaadin/starter/bakery/AbstractIT.java b/src/test/java/com/vaadin/starter/bakery/AbstractIT.java
@@ -87,7 +87,7 @@ protected LoginViewElement openLoginView(WebDriver driver, String url) {
 	 * 
 	 *         * @throws TimeoutException If 10 seconds passed.
 	 */
-	protected WebElement waitUntilElementPresent(By by) {
+	protected WebElement waitUntilElementPresent(org.openqa.selenium.By by) {
 		return new WebDriverWait(getDriver(), 10).until(ExpectedConditions.presenceOfElementLocated(by));
 	}
 }
diff --git a/src/test/java/com/vaadin/starter/bakery/ui/UsersViewIT.java b/src/test/java/com/vaadin/starter/bakery/ui/UsersViewIT.java
@@ -14,9 +14,10 @@ public class UsersViewIT extends AbstractIT {
 
 	private UsersViewElement openTestPage() {
 		openLoginView().login("admin@vaadin.com", "admin");
-		WebElement usersNavLink = findElement(By.shadowSelector("bakery-app::shadow bakery-navigation::shadow a[href='users']"));
+		WebElement usersNavLink = findElement(By.shadowSelector("bakery-app::shadow bakery-navigation::shadow paper-tab[page-id='users']"));
 		usersNavLink.click();
-		return ((TestBenchElement) findElement(By.tagName("bakery-users"))).wrap(UsersViewElement.class);
+		WebElement usersViewElement = waitUntilElementPresent(By.tagName("bakery-users"));
+		return ((TestBenchElement) usersViewElement).wrap(UsersViewElement.class);
 	}
 
 	@Test