From 4de5e74b5caec5cff0fdb4696cb64790d471170c Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Mon, 18 Dec 2023 11:53:52 +0100
Subject: [PATCH 1/2] fix(progress): prevent unnecessary animation to run when
 not visible Progress has an infinite animation on `<div class="dots">`.
 `.dots` is only visible when `value` < `max` or `buffer` < `max`. But the
 animation runs in any case.

---
 progress/internal/linear-progress.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/progress/internal/linear-progress.ts b/progress/internal/linear-progress.ts
index bc6639fbf..63297602e 100644
--- a/progress/internal/linear-progress.ts
+++ b/progress/internal/linear-progress.ts
@@ -7,6 +7,7 @@
 import {html} from 'lit';
 import {property} from 'lit/decorators.js';
 import {styleMap} from 'lit/directives/style-map.js';
+import {when} from 'lit/directives/when.js';
 
 import {Progress} from './progress.js';
 
@@ -33,9 +34,10 @@ export class LinearProgress extends Progress {
         (this.indeterminate ? 1 : this.buffer / this.max) * 100
       }%)`,
     };
-
+    // only display dots when visible - this prevents invisible infinite animation
+    const showDots = !this.indeterminate && (this.buffer >= this.max || this.value >= this.max) ;
     return html`
-      <div class="dots"></div>
+      ${when(showDots, () => html`<div class="dots"></div>`)}
       <div class="inactive-track" style=${styleMap(dotStyles)}></div>
       <div class="bar primary-bar" style=${styleMap(progressStyles)}>
         <div class="bar-inner"></div>

From f0dab482fd4bcd16e3471f0ca52e3155a5c5484e Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Mon, 18 Dec 2023 21:26:00 +0100
Subject: [PATCH 2/2] chore(progress): use ternary operator + nothing instead
 of when

---
 progress/internal/linear-progress.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/progress/internal/linear-progress.ts b/progress/internal/linear-progress.ts
index 63297602e..23bc270fb 100644
--- a/progress/internal/linear-progress.ts
+++ b/progress/internal/linear-progress.ts
@@ -4,10 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {html} from 'lit';
+import {html, nothing} from 'lit';
 import {property} from 'lit/decorators.js';
 import {styleMap} from 'lit/directives/style-map.js';
-import {when} from 'lit/directives/when.js';
 
 import {Progress} from './progress.js';
 
@@ -37,7 +36,7 @@ export class LinearProgress extends Progress {
     // only display dots when visible - this prevents invisible infinite animation
     const showDots = !this.indeterminate && (this.buffer >= this.max || this.value >= this.max) ;
     return html`
-      ${when(showDots, () => html`<div class="dots"></div>`)}
+      ${showDots ? html`<div class="dots"></div>` : nothing}
       <div class="inactive-track" style=${styleMap(dotStyles)}></div>
       <div class="bar primary-bar" style=${styleMap(progressStyles)}>
         <div class="bar-inner"></div>