frontend: feat: load the next entry points a screen before the end and show a skeleton row meanwhile

Author: DerDennisOP

frontend/packages/ui/src/ui/in-view/in-view.directive.spec.ts

@@ -14,19 +14,20 @@ type Callback = (entries: Partial<IntersectionObserverEntry>[]) => void;
 class FakeObserver {
   static live: FakeObserver[] = [];
   observed: Element[] = [];
-  constructor(readonly callback: Callback) { FakeObserver.live.push(this); }
+  constructor(readonly callback: Callback, readonly options?: IntersectionObserverInit) { FakeObserver.live.push(this); }
   observe(el: Element) { this.observed.push(el); }
   disconnect() { FakeObserver.live = FakeObserver.live.filter(o => o !== this); }
 }
 
 @Component({
   standalone: true,
   imports: [InViewDirective],
-  template: `<div class="sentinel" (grInView)="seen.set(seen() + 1)" [grInViewKey]="key()"></div>`,
+  template: `<div class="sentinel" (grInView)="seen.set(seen() + 1)" [grInViewKey]="key()" [grInViewMargin]="margin()"></div>`,
 })
 class HostComponent {
   seen = signal(0);
   key = signal(0);
+  margin = signal('200px');
 }
 
 function render() {
@@ -62,4 +63,11 @@ describe('InViewDirective', () => {
     FakeObserver.live[0].callback([{ isIntersecting: true }]);
     expect(fixture.componentInstance.seen()).toBe(1);
   });
+
+  it('fires early by the margin a list asks for', () => {
+    const fixture = render();
+    fixture.componentInstance.margin.set('100%');
+    fixture.detectChanges();
+    expect(FakeObserver.live[0].options?.rootMargin).toBe('100%');
+  });
 });

frontend/packages/ui/src/ui/in-view/in-view.directive.ts

@@ -15,16 +15,18 @@ import { Directive, ElementRef, effect, inject, input, output } from '@angular/c
 export class InViewDirective {
   grInView = output<void>();
   grInViewKey = input<unknown>();
+  grInViewMargin = input('200px');
 
   private host = inject<ElementRef<Element>>(ElementRef);
 
   constructor() {
     effect((onCleanup) => {
       this.grInViewKey();
+      const rootMargin = this.grInViewMargin();
       if (typeof IntersectionObserver === 'undefined') return;
       const observer = new IntersectionObserver(
         (entries) => entries.some((e) => e.isIntersecting) && this.grInView.emit(),
-        { rootMargin: '200px' },
+        { rootMargin },
       );
       observer.observe(this.host.nativeElement);
       onCleanup(() => observer.disconnect());

frontend/src/app/features/tasks/task-detail/task-detail.component.html

@@ -160,8 +160,12 @@ <h2 [title]="evalTitle(sel)">{{ evalTitle(sel) }}</h2>
           }
           @if (entryPoints().length > 0) {
             @if (entryPoints().length < entryPointsTotal()) {
-              <div class="pkg-more" (grInView)="loadMoreEntryPoints()" [grInViewKey]="entryPoints().length">
-                Loading more ({{ entryPoints().length }} of {{ entryPointsTotal() }})
+              <div class="pkg pkg-more" aria-busy="true" [attr.aria-label]="'Loading packages, ' + entryPoints().length + ' of ' + entryPointsTotal()"
+                   (grInView)="loadMoreEntryPoints()" [grInViewKey]="entryPoints().length" grInViewMargin="100%">
+                <gr-skeleton class="si" />
+                <gr-skeleton class="pkg-name" />
+                <gr-skeleton class="pkg-bar" height="7px" />
+                <gr-skeleton class="pkg-deps" width="5rem" />
               </div>
             }
           } @else if (!entryPointsLoading() && isRunning(sel.status)) {

frontend/src/app/features/tasks/task-detail/task-detail.component.spec.ts

@@ -913,7 +913,8 @@ describe('TaskDetailComponent - #636 eval page', () => {
     fixture.detectChanges();
     const spy = vi.spyOn(tasksService, 'getEntryPoints').mockReturnValue(of({ entry_points: [epSummary('b')], total: 2 }));
     const sentinel = fixture.debugElement.query(By.css('.pkg-more'));
-    expect(fixture.nativeElement.textContent).not.toContain('Show more');
+    expect(sentinel.nativeElement.querySelectorAll('gr-skeleton').length).toBeGreaterThan(0);
+    expect(sentinel.nativeElement.textContent.trim()).toBe('');
     sentinel.triggerEventHandler('grInView');
     expect(spy).toHaveBeenCalledWith('acme', 'demo', 'e1', 25, 1);
     fixture.detectChanges();

frontend/src/app/features/tasks/task-detail/task-detail.packages.scss

@@ -11,10 +11,6 @@
 
 .pkg-more {
   margin-top: $space-pair;
-  padding: $spacing-sm $spacing-md;
-  color: var(--gr-text-muted);
-  font-size: $font-size-sm;
-  text-align: center;
 }
 
 .pkg {