fix: don't show empty query display if API not ready yet

plugin/src/data/index.ts

@@ -17,7 +17,8 @@ export enum QueryErrorKind {
 
 export type SubscriptionResult =
   | { type: "success"; tasks: Task[] }
-  | { type: "error"; kind: QueryErrorKind };
+  | { type: "error"; kind: QueryErrorKind }
+  | { type: "not-ready" };
 export type OnSubscriptionChange = (result: SubscriptionResult) => void;
 export type Refresh = () => Promise<void>;
 
@@ -100,7 +101,7 @@ export class TodoistAdapter {
   private buildQueryFetcher(query: string): SubscriptionFetcher {
     return async () => {
       if (!this.api.hasValue()) {
-        return [];
+        return undefined;
       }
       const data = await this.api.withInner((api) => api.getTasks(query));
       const hydrated = data.map((t) => this.hydrate(t));
@@ -189,7 +190,7 @@ const makeUnknownLabel = (): Label => {
   };
 };
 
-type SubscriptionFetcher = () => Promise<Task[]>;
+type SubscriptionFetcher = () => Promise<Task[] | undefined>;
 
 class Subscription {
   private readonly userCallback: OnSubscriptionChange;
@@ -211,7 +212,11 @@ class Subscription {
   public update = async () => {
     try {
       const data = await this.fetch();
-      this.result = { type: "success", tasks: data };
+      if (data === undefined) {
+        this.result = { type: "not-ready" };
+      } else {
+        this.result = { type: "success", tasks: data };
+      }
     } catch (error: unknown) {
       console.error(`Failed to refresh task query: ${error}`);
 

plugin/src/ui/query/QueryRoot.tsx

@@ -109,6 +109,8 @@ const getTitle = (query: Query, result: SubscriptionResult): string => {
     }
     case "success":
       return query.name.replace("{task_count}", result.tasks.length.toString());
+    case "not-ready":
+      return "";
   }
 };
 
@@ -120,6 +122,10 @@ const QueryResponseHandler: React.FC<{
     return <Displays.Error kind={result.kind} />;
   }
 
+  if (result.type === "not-ready") {
+    return <Displays.NotReady />;
+  }
+
   const tasks = result.tasks;
   if (tasks.length === 0) {
     return <Displays.Empty />;

plugin/src/ui/query/displays/NotReadyDisplay.tsx

@@ -0,0 +1,3 @@
+export const NotReadyDisplay: React.FC = () => {
+  return <></>;
+};

plugin/src/ui/query/displays/index.ts

@@ -2,10 +2,12 @@ import { EmptyDisplay } from "@/ui/query/displays/EmptyDisplay";
 import { ErrorDisplay } from "@/ui/query/displays/ErrorDisplay";
 import { GroupedDisplay } from "@/ui/query/displays/GroupedDisplay";
 import { ListDisplay } from "@/ui/query/displays/ListDisplay";
+import { NotReadyDisplay } from "@/ui/query/displays/NotReadyDisplay";
 
 export const Displays = {
   Error: ErrorDisplay,
   Empty: EmptyDisplay,
   List: ListDisplay,
   Grouped: GroupedDisplay,
+  NotReady: NotReadyDisplay,
 };