{"id":16690798,"url":"https://github.com/omaxel/angular-show-debounce","last_synced_at":"2026-02-24T02:31:38.747Z","repository":{"id":63587827,"uuid":"561864994","full_name":"omaxel/angular-show-debounce","owner":"omaxel","description":"Debounce visibility of elements in Angular.","archived":false,"fork":false,"pushed_at":"2022-12-18T20:07:17.000Z","size":360,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-08T20:36:33.606Z","etag":null,"topics":["angular","progress","progress-bar","rxjs","spinner"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/omaxel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-04T17:03:48.000Z","updated_at":"2022-12-22T09:21:27.000Z","dependencies_parsed_at":"2023-01-29T20:00:36.848Z","dependency_job_id":null,"html_url":"https://github.com/omaxel/angular-show-debounce","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/omaxel/angular-show-debounce","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omaxel%2Fangular-show-debounce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omaxel%2Fangular-show-debounce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omaxel%2Fangular-show-debounce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omaxel%2Fangular-show-debounce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/omaxel","download_url":"https://codeload.github.com/omaxel/angular-show-debounce/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omaxel%2Fangular-show-debounce/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29769176,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T01:40:24.820Z","status":"online","status_checked_at":"2026-02-24T02:00:07.497Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","progress","progress-bar","rxjs","spinner"],"created_at":"2024-10-12T16:05:29.275Z","updated_at":"2026-02-24T02:31:38.726Z","avatar_url":"https://github.com/omaxel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Show Debounce\n\nDebounce visibility of elements. This is especially useful with spinners. Read the [Context](#context) for more information.\n\nThis is library helps you achieve this in Angular:\n\n\u003e Wait X milliseconds before showing this element. If I cancel the operation before, do nothing.\n\n## Installation\n\n```\nnpm i @omaxel/angular-show-debounce\n```\n\n## Usage\n\nThis library exports a directive and a RxJS operator.\n\n### Directive\n\n_example.component.html_\n\n```\n\u003cdiv *omxDebouncedIf=\"loading\"\u003eLoading...\u003c/div\u003e\n```\n\nThe `div` element will be shown after 100ms since `loading` is set to `true`, unless `loading` is set to `false` before 100ms.\n\nIn order to use the directive, you must import it in your module:\n\n```\nimport { DebouncedIfDirective } from \"@omaxel/angular-show-debounce\";\n\n@NgModule({\n  imports: [BrowserModule, DebouncedIfDirective], // \u003c-- Import the directive\n  declarations: [AppComponent],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n### RxJS operator\n\n_example.component.ts_\n\n```\nimport { showDebounce } from '@omaxel/angular-show-debounce';\n...\nloading$ = loadingSourceObservable.pipe(showDebounce());\n```\n\nThe `loading$` observable will emit `true` after 100ms since `loadingSourceObservable` emits the first `true`, unless `loadingSourceObservable` emits `false` before 100ms.\n\n## Customize debounce time\n\nYou can specify your own value for the debounce time (default = 100) for both the directive and the RxJS operator:\n\n_Directive_\n\n```\n\u003cdiv *omxDebouncedIf=\"loading; debounce: 150\"\u003eLoading...\u003c/div\u003e\n```\n\n_RxJS operator_\n\n```\nloading$ = loadingSourceObservable.pipe(showDebounce(150));\n```\n\n## Context\n\n\u003e For operations where it is unknown in advance how much work has to be done [...] use a less specific progress indicator in the form of a spinning ball, a busy bee flying over the screen, dots printed on a status line, or any such mechanism that at least indicates that the system is working, even if it does not indicate what it is doing.\n\n[nngrop.com](https://www.nngroup.com/articles/response-times-3-important-limits/)\n\nWe surely want to display a progress indicator while the application is executing a task, for example when calling APIs. Often times, we don't have progress to display. In that case we show an undetermined progress indicator, aka _spinner_.\n\nAllegedly, we don't know the exact amount of time for the task to be completed. For this reason we usually end up with this kind of code:\n\n```\nshowSpinner();\n\nexecuteTask();\n\nhideSpinner();\n```\n\nThis code is safe since the user knows something is happening.\n\nWhat happens, thought, when `executeTask()` completes \"almost\" immediately? The user will assist to an appearing of the spinner immediately followed by its disappearing.\n\nThat's bad, don't you agree? The same article of the first quote continues:\n\n\u003e 0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.\n\nThe application has 100ms to perform tasks. After that time, we must show something to the user.\n\nThe above code should now look like this:\n\n```\nshowSpinnerIn100ms();\n\nexecuteTask();\n\nhideSpinnerIfItIsVisible();\n```\n\nThis is conceptually easy. In Angular, the preferred way to show/hide elements is by using the `*ngIf` directive. This directive accept a boolean parameter to decide whatever to the display the element or not.\nHowever, there's no way to delay the element rendering. You could use an observable, but then you'll need to copy the same logic in all component's observable where you want to have that feature.\n\nThis library helps you in that goal by covering both cases: a custom `*ngIf` directive and a RxJS operator.\n\nCheck the [Usage](#usage) section for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomaxel%2Fangular-show-debounce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomaxel%2Fangular-show-debounce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomaxel%2Fangular-show-debounce/lists"}