From 214db6d797bc3eab4c6a77e6da926372e1985cc2 Mon Sep 17 00:00:00 2001
From: Kyle Ju <kyleju@google.com>
Date: Wed, 18 Dec 2024 17:44:55 -0800
Subject: [PATCH] Fix Async Tasks data cache issue (#997)

* Fix Task data cache issue

* address comments
---
 .../js/components/webstatus-overview-page.ts  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/static/js/components/webstatus-overview-page.ts b/frontend/src/static/js/components/webstatus-overview-page.ts
index 074eb466..283dbc9a 100644
--- a/frontend/src/static/js/components/webstatus-overview-page.ts
+++ b/frontend/src/static/js/components/webstatus-overview-page.ts
@@ -17,7 +17,7 @@
 import {consume} from '@lit/context';
 import {Task, TaskStatus} from '@lit/task';
 import {LitElement, type TemplateResult, html} from 'lit';
-import {customElement, state} from 'lit/decorators.js';
+import {customElement, state, property} from 'lit/decorators.js';
 import {type components} from 'webstatus.dev-backend';
 
 import {
@@ -55,9 +55,12 @@ export class OverviewPage extends LitElement {
     data: null,
   };
 
-  @state()
+  @property({type: Object})
   location!: {search: string}; // Set by router.
 
+  @state()
+  currentLocation?: {search: string};
+
   constructor() {
     super();
 
@@ -67,7 +70,17 @@ export class OverviewPage extends LitElement {
       task: async ([apiClient, routerLocation]): Promise<
         components['schemas']['FeaturePage']
       > => {
-        return this._fetchFeatures(apiClient, routerLocation);
+        if (this.location.search !== this.currentLocation?.search) {
+          // Reset taskTracker here due to a Task data cache issue.
+          this.taskTracker = {
+            status: TaskStatus.INITIAL,
+            error: null,
+            data: null,
+          };
+          this.currentLocation = this.location;
+          return this._fetchFeatures(apiClient, routerLocation);
+        }
+        return this.taskTracker.data ?? {metadata: {total: 0}, data: []};
       },
       onComplete: page => {
         this.taskTracker = {