Repository: home-assistant/frontend (language: python)

Issue:
Timer displays incorrect remaining time after reloading configuration
### Checklist

- [X] I have updated to the latest available Home Assistant version.
- [X] I have cleared the cache of my browser.
- [X] I have tried a different browser to see if it is related to my browser.
- [ ] I have tried reproducing the issue in [safe mode](https://www.home-assistant.io/blog/2023/11/01/release-202311/#restarting-into-safe-mode) to rule out problems with unsupported custom resources.

### Describe the issue you are experiencing

I have a timer set up inside a package like this (I don't know if setting up inside a package matters):
```yaml
timer:
  my_timer:
    restore: true
```
I start it from an automation with the duration set to 72 hours.
When I go into Developer Tools to reload all yaml configuration, the countdown on the dashboard will start again from 72 hours.
The "Finishes at" attribute will show the correct date and if I restart Home Assistant, the countdown on the UI will also return to the correct number.

### Describe the behavior you expected

Remaining time for a timer displays correctly on the UI.

### Steps to reproduce the issue

See "Describe the issue you are experiencing"

### What version of Home Assistant Core has the issue?

2024.9.3

### What was the last working version of Home Assistant Core?

_No response_

### In which browser are you experiencing the issue with?

Microsoft Edge Version 129.0.2792.65 (Official build) (64-bit)

### Which operating system are you using to run this browser?

Windows 10

### State of relevant entities

_No response_

### Problem-relevant frontend configuration

_No response_

### Javascript errors shown in your browser console/inspector

_No response_

### Additional information

_No response_


Discussion / hints:

Fix patch:
diff --git a/src/data/timer.ts b/src/data/timer.ts
index 4b0ab1ce2768..3290be645d7d 100644
--- a/src/data/timer.ts
+++ b/src/data/timer.ts
@@ -72,8 +72,8 @@ export const timerTimeRemaining = (
 
   if (stateObj.state === "active") {
     const now = new Date().getTime();
-    const madeActive = new Date(stateObj.last_changed).getTime();
-    timeRemaining = Math.max(timeRemaining - (now - madeActive) / 1000, 0);
+    const finishes = new Date(stateObj.attributes.finishes_at).getTime();
+    timeRemaining = Math.max((finishes - now) / 1000, 0);
   }
 
   return timeRemaining;


Test patch:
diff --git a/test/common/entity/timer_time_remaining_test.ts b/test/common/entity/timer_time_remaining_test.ts
index 13ba7eb20673..810f0e0f276a 100644
--- a/test/common/entity/timer_time_remaining_test.ts
+++ b/test/common/entity/timer_time_remaining_test.ts
@@ -42,8 +42,8 @@ describe("timerTimeRemaining", () => {
           state: "active",
           attributes: {
             remaining: "0:01:05",
+            finishes_at: "2018-01-17T16:16:17+00:00",
           },
-          last_changed: "2018-01-17T16:15:12Z",
         } as any),
         47
       );