The `searchString$` fires immedeatly while the `isEmpty$` has a 500ms delay. That is why the noResults text was shown before the actual results have been loaded. That is why this solution relies on the `isEmpty$` observable instead

frontend/src/app/features/team-planner/team-planner/add-work-packages/add-existing-pane.component.html

@@ -42,10 +42,10 @@
       data-qa-selector="op-add-existing-pane--empty-state"
     >
       <img
-        *ngIf="searchStringEmpty()"
+        *ngIf="(noResultsFound$ | async)?.showImage"
         [src]="image.empty_state" class="op-add-existing-pane--empty-state-image"/>
       <span
-        [innerHTML]="noResultsText()"
+        [innerHTML]="(noResultsFound$ | async)?.text"
         class="op-add-existing-pane--empty-state-text"
       ></span>
     </div>

frontend/src/app/features/team-planner/team-planner/add-work-packages/add-existing-pane.component.ts

@@ -67,6 +67,21 @@ export class AddExistingPaneComponent extends UntilDestroyedMixin implements OnI
 
   isLoading$ = new BehaviorSubject<boolean>(false);
 
+  noResultsFound$ = this.isEmpty$
+    .pipe(
+      map((resultEmpty) => {
+        if (this.searchString$.getValue().length === 0) {
+          return { showImage: true, text: this.text.empty_state };
+        }
+
+        if (resultEmpty) {
+          return { showImage: false, text: this.text.no_results };
+        }
+
+        return {};
+      }),
+    );
+
   currentWorkPackages$ = combineLatest([
     this.calendarDrag.draggableWorkPackages$,
     this.querySpace.results.values$(),
@@ -203,14 +218,6 @@ export class AddExistingPaneComponent extends UntilDestroyedMixin implements OnI
     );
   }
 
-  searchStringEmpty():boolean {
-    return this.searchString$.getValue().length === 0;
-  }
-
-  noResultsText():string {
-    return this.searchStringEmpty() ? this.text.empty_state : this.text.no_results;
-  }
-
   private addExistingFilters(filters:ApiV3FilterBuilder) {
     const query = this.querySpace.query.value;
     if (query?.filters) {