docs: add withCallState feature documentation

Author: abhijit-chikane

docs/docs/extensions.md

@@ -13,6 +13,7 @@ It offers extensions like:
 - [Immutable State Protection](./with-immutable-state): Protects the state from being mutated outside or inside the Store.
 - [Redux](./with-redux): Possibility to use the Redux Pattern (Reducer, Actions, Effects)
 - [Reset](./with-reset): Adds a `resetState` method to your store
+- [Call State](./with-call-state): Add call state management to your signal stores
 - [Storage Sync](./with-storage-sync): Synchronizes the Store with Web Storage
 - [Undo Redo](./with-undo-redo): Adds Undo/Redo functionality to your store
 

docs/docs/with-call-state.md

@@ -0,0 +1,140 @@
+---
+title: withCallState
+description: Add call state management to your NgRx signal stores
+---
+
+# withCallState
+
+The `withCallState` feature adds call state management capabilities to your NgRx signal stores, making it easy to track the status of asynchronous operations. It provides built-in states for loading, loaded, and error conditions.
+
+## Basic Usage
+
+The simplest way to use `withCallState` is without any configuration:
+
+```typescript
+export const TodosStore = signalStore(
+  withCallState(),
+  // ... other features
+);
+```
+
+This provides you with:
+- A `callState` state property of type `'init' | 'loading' | 'loaded' | { error: string }`
+- Computed signals: `loading`, `loaded`, and `error`
+- Helper methods: `setLoading()`, `setLoaded()`, and `setError()`
+
+Example usage:
+
+```typescript
+export class TodosComponent {
+  store = inject(TodosStore);
+
+  loadTodos() {
+    this.store.setLoading(); // callState = 'loading'
+    try {
+      // ... fetch todos
+      this.store.setLoaded(); // callState = 'loaded'
+    } catch (error) {
+      this.store.setError(error); // callState = { error: 'error message' }
+    }
+  }
+}
+```
+
+## Named Collection
+
+You can track state for a specific collection by providing a collection name:
+
+```typescript
+export const TodosStore = signalStore(
+  withCallState({ collection: 'todos' }),
+  // ... other features
+);
+```
+
+This provides:
+- A `todosCallState` state property
+- Computed signals: `todosLoading`, `todosLoaded`, and `todosError`
+- Helper methods with optional collection parameter
+
+## Multiple Collections
+
+For managing multiple async operations, use the collections configuration:
+
+```typescript
+export const TodosStore = signalStore(
+  withCallState({ collections: ['todos', 'categories'] }),
+  // ... other features
+);
+```
+
+This creates separate states and signals for each collection:
+- States: `todosCallState`, `categoriesCallState`
+- Signals: `todosLoading`, `todosLoaded`, `todosError`, `categoriesLoading`, etc.
+
+## State Types
+
+The call state can be one of these values:
+- `'init'`: Initial state
+- `'loading'`: Operation in progress
+- `'loaded'`: Operation completed successfully
+- `{ error: string }`: Operation failed with error message
+
+## Helper Methods
+
+### setLoading()
+Sets the call state to 'loading':
+```typescript
+store.setLoading(); // Basic usage
+store.setLoading('todos'); // With collection
+```
+
+### setLoaded()
+Sets the call state to 'loaded':
+```typescript
+store.setLoaded(); // Basic usage
+store.setLoaded('todos'); // With collection
+```
+
+### setError()
+Sets the call state to error with a message:
+```typescript
+store.setError(error); // Basic usage
+store.setError(error, 'todos'); // With collection
+```
+
+## Accessing State
+
+Access the computed signals in your templates or component code:
+
+```typescript
+@Component({
+  template: `
+    @if (store.loading()) {
+      <div>Loading...</div>
+    }
+    @if (store.error()) {
+      <div>Error: {{ store.error() }}</div>
+    }
+    @if (store.loaded()) {
+      <div>Content loaded!</div>
+    }
+  `
+})
+export class MyComponent {
+  store = inject(MyStore);
+}
+```
+
+For collections:
+```typescript
+@Component({
+  template: `
+   @if (store.todosLoading()) {
+     <div>Loading todos...</div>
+   }
+   @if (store.categoriesLoading()) {
+     <div>Loading categories...</div>
+   }
+  `
+})

docs/sidebars.ts

@@ -25,6 +25,7 @@ const sidebars: SidebarsConfig = {
     'with-immutable-state',
     'with-feature-factory',
     'with-conditional',
+    'with-call-state',
   ],
   reduxConnectorSidebar: [
     {