From e88278102deecd6a1c24683056cdb1f9cccf8d98 Mon Sep 17 00:00:00 2001
From: Zita Szupera <szuperaz@gmail.com>
Date: Wed, 11 Sep 2024 14:03:27 +0200
Subject: [PATCH] example: check channel query state before closing the menu

---
 .../Angular/code-examples/responsive-layout.mdx  | 16 +++++++++++++++-
 projects/sample-app/src/app/app.component.ts     | 12 ++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/docusaurus/docs/Angular/code-examples/responsive-layout.mdx b/docusaurus/docs/Angular/code-examples/responsive-layout.mdx
index 3d282df7..e56b73cd 100644
--- a/docusaurus/docs/Angular/code-examples/responsive-layout.mdx
+++ b/docusaurus/docs/Angular/code-examples/responsive-layout.mdx
@@ -204,7 +204,21 @@ Lastly, implement auto close behavior for the channel list:
 
 ```html
 <stream-channel-list
-  (click)="isMenuOpen = false"
+  (click)="closeMenu()"
   class="channel-list menu-{{ isMenuOpen ? 'open' : 'close' }}"
 ></stream-channel-list>
 ```
+
+```ts
+closeMenu() {
+  let isChannelQuieryInProgress = false;
+  this.channelService.channelQueryState$.pipe(take(1)).subscribe((state) => {
+    if (state?.state === 'in-progress') {
+      isChannelQuieryInProgress = true;
+    }
+  });
+  if (!isChannelQuieryInProgress) {
+    this.isMenuOpen = false;
+  }
+}
+```
diff --git a/projects/sample-app/src/app/app.component.ts b/projects/sample-app/src/app/app.component.ts
index bfdb3856..36bf7fc2 100644
--- a/projects/sample-app/src/app/app.component.ts
+++ b/projects/sample-app/src/app/app.component.ts
@@ -5,7 +5,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, take } from 'rxjs/operators';
 import {
   ChatClientService,
   ChannelService,
@@ -78,6 +78,14 @@ export class AppComponent implements AfterViewInit {
   }
 
   closeMenu() {
-    this.isMenuOpen = false;
+    let isChannelQuieryInProgress = false;
+    this.channelService.channelQueryState$.pipe(take(1)).subscribe((state) => {
+      if (state?.state === 'in-progress') {
+        isChannelQuieryInProgress = true;
+      }
+    });
+    if (!isChannelQuieryInProgress) {
+      this.isMenuOpen = false;
+    }
   }
 }