example: check channel query state before closing the menu

GetStream · Sep 11, 2024 · e882781 · e882781
1 parent 00d76ce
commit e882781
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git 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
@@ -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;
+    }
   }
 }