> For the complete documentation index, see [llms.txt](https://www.learnrxjs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.learnrxjs.io/learn-rxjs/recipes/save-indicator.md).

# Save Indicator

This recipe demonstrates the creation of a google docs-esque save indicator with RxJS.

### Example Code

( [StackBlitz](https://stackblitz.com/edit/rxjs-3txbvy?file=index.ts) )

![Save Indicator](https://drive.google.com/uc?export=view\&id=1sYFqLoKlT0EPHxSDMSX7pT14RDjybU0Q)

```js
import { fromEvent, of, merge, empty, concat, defer } from 'rxjs';
import {
  delay,
  map,
  mergeMap,
  tap,
  debounceTime,
  distinctUntilChanged,
  mapTo,
  filter,
  share,
  switchAll
} from 'rxjs/operators';
import { format } from 'date-fns';

// track in progress saves
let savesInProgress = 0;

// references
const input = document.getElementById('note-input');
const saveIndicator = document.querySelector('.save-indicator');

// streams
const keyup$ = fromEvent(input, 'keyup');

// fake save request
const saveChanges = value => {
  return of(value).pipe(delay(1500));
};

/**
 * Trigger a save when the user stops typing for 200ms
 * After new data has been successfully saved, so a saved
 * and last updated indicator.
 */
const inputToSave$ = keyup$.pipe(
  debounceTime(200),
  map(e => e.target.value),
  distinctUntilChanged(),
  share()
);

const savesInProgress$ = inputToSave$.pipe(
  mapTo(of('Saving')),
  tap(_ => savesInProgress++)
);

const savesCompleted$ = inputToSave$.pipe(
  mergeMap(saveChanges),
  tap(_ => savesInProgress--),
  // ignore if additional saves are in progress
  filter(_ => !savesInProgress),
  mapTo(
    concat(
      // display saved for 2s
      of('Saved!'),
      empty().pipe(delay(2000)),
      // then last updated time, defer for proper time
      defer(() => of(`Last updated: ${format(Date.now(), 'MM/DD/YYYY hh:mm')}`))
    )
  )
);

merge(savesInProgress$, savesCompleted$)
  .pipe(
    /*
   If new save comes in when our completion observable is running, we want to switch to it for a status update.
  */
    switchAll()
  )
  .subscribe(status => {
    saveIndicator.innerHTML = status;
  });
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://www.learnrxjs.io/learn-rxjs/recipes/save-indicator.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.