Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(docs-infra): improve API reference page loading time and drop blocking time (#58911)

Browse source 
By scheduling the focus of the input, we can drop the blocking time that is caused by the blocking task of rendering.

PR Close #58911
This commit is contained in:
Enea Jahollari 2024-11-26 19:07:13 +01:00 committed by Andrew Kushnir
parent ec91da095f
commit d8aa201d0b
1 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
adev/src/app/features/references/api-reference-list/api-reference-list.component.ts
View file

@ -16,7 +16,7 @@ import {
model,
signal,
viewChild,
afterRenderEffect,
afterNextRender,
} from '@angular/core';
import ApiItemsSection from '../api-items-section/api-items-section.component';
import {FormsModule} from '@angular/forms';
@ -56,14 +56,14 @@ export default class ApiReferenceList {
filterInput = viewChild.required(TextField, {read: ElementRef});
constructor() {
afterRenderEffect({
write: () => {
// Lord forgive me for I have sinned
// Use the CVA to focus when https://github.com/angular/angular/issues/31133 is implemented
if (matchMedia('(hover: hover) and (pointer:fine)').matches) {
afterNextRender(() => {
// Lord forgive me for I have sinned
// Use the CVA to focus when https://github.com/angular/angular/issues/31133 is implemented
if (matchMedia('(hover: hover) and (pointer:fine)').matches) {
scheduleOnIdle(() => {
this.filterInput().nativeElement.querySelector('input').focus();
}
},
});
}
});
effect(() => {
@ -107,3 +107,16 @@ export default class ApiReferenceList {
this.type.update((currentType) => (currentType === itemType ? ALL_STATUSES_KEY : itemType));
}
}
/**
* Schedules a function to be run in a new macrotask.
* This is needed because the `requestIdleCallback` API is not available in all browsers.
* @param fn
*/
function scheduleOnIdle(fn: () => void): void {
if (typeof requestIdleCallback !== 'undefined') {
requestIdleCallback(fn);
} else {
setTimeout(fn, 0);
}
}