From ca88cd765e75cf7f76abca4c4be274fa1241e2d7 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Tue, 6 Dec 2022 10:43:28 -0800
Subject: [PATCH] chore(button): Create ripple lazily for buttons

PiperOrigin-RevId: 493350615
---
 button/lib/button.ts      | 15 +++++++++++----
 button/lib/link-button.ts | 10 +++++++---
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/button/lib/button.ts b/button/lib/button.ts
index c5207c801..66a9e57f5 100644
--- a/button/lib/button.ts
+++ b/button/lib/button.ts
@@ -14,6 +14,7 @@ import {html, LitElement, TemplateResult} from 'lit';
 import {property, query, queryAssignedElements, queryAsync, state} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
+import {when} from 'lit/directives/when.js';
 import {html as staticHtml, literal} from 'lit/static-html.js';
 
 import {ariaProperty} from '../../decorators/aria-property.js';
@@ -55,10 +56,12 @@ export abstract class Button extends LitElement implements ButtonState {
 
   @query('.md3-button') buttonElement!: HTMLElement;
 
-  @queryAsync('md-ripple') ripple!: Promise<MdRipple>;
+  @queryAsync('md-ripple') ripple!: Promise<MdRipple|null>;
 
   @state() protected showFocusRing = false;
 
+  @state() protected showRipple = false;
+
   @queryAssignedElements({slot: 'icon', flatten: true})
   protected iconElement!: HTMLElement[]|null;
 
@@ -67,6 +70,10 @@ export abstract class Button extends LitElement implements ButtonState {
    * @soyAttributes buttonAttributes: .md3-button
    */
   protected override render(): TemplateResult {
+    const getRipple = () => {
+      this.showRipple = true;
+      return this.ripple;
+    };
     // TODO(b/237283903): Replace ifDefined(... || undefined) with ifTruthy(...)
     return html`
       <button
@@ -78,10 +85,10 @@ export abstract class Button extends LitElement implements ButtonState {
           @focus="${this.handleFocus}"
           @blur="${this.handleBlur}"
           @click="${this.handleClick}"
-          ${ripple(this.ripple)}>
+          ${ripple(getRipple)}>
         ${this.renderFocusRing()}
         ${this.renderOverlay()}
-        ${this.renderRipple()}
+        ${when(this.showRipple, () => this.renderRipple())}
         ${this.renderOutline()}
         ${this.renderTouchTarget()}
         ${this.renderLeadingIcon()}
@@ -119,7 +126,7 @@ export abstract class Button extends LitElement implements ButtonState {
   }
 
   /** @soyTemplate */
-  protected renderRipple(): TemplateResult|string {
+  protected renderRipple(): TemplateResult {
     return html`<md-ripple class="md3-button__ripple" ?disabled="${
         this.disabled}"></md-ripple>`;
   }
diff --git a/button/lib/link-button.ts b/button/lib/link-button.ts
index 712f97504..14c602ecd 100644
--- a/button/lib/link-button.ts
+++ b/button/lib/link-button.ts
@@ -8,6 +8,7 @@ import {html, TemplateResult} from 'lit';
 import {property} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
+import {when} from 'lit/directives/when.js';
 
 import {ripple} from '../../ripple/directive.js';
 
@@ -43,6 +44,10 @@ export abstract class LinkButton extends Button {
    * @soyAttributes buttonAttributes: .md3-button
    */
   protected override render(): TemplateResult {
+    const getRipple = () => {
+      this.showRipple = true;
+      return this.ripple;
+    };
     return html`
       <span class="md3-link-button-wrapper">
         <a class="md3-button ${classMap(this.getRenderClasses())}"
@@ -53,11 +58,10 @@ export abstract class LinkButton extends Button {
           @blur="${this.handleBlur}"
           @pointerdown="${this.handlePointerDown}"
           @click="${this.handleClick}"
-          ${ripple(this.ripple)}
-          >
+          ${ripple(getRipple)}>
             ${this.renderFocusRing()}
             ${this.renderOverlay()}
-            ${this.renderRipple()}
+            ${when(this.showRipple, () => this.renderRipple())}
             ${this.renderOutline()}
             ${this.renderTouchTarget()}
             ${this.renderIcon()}