DEV Community: Sarmitha Krishnagobal

Angular Defer View

Sarmitha Krishnagobal — Wed, 01 Jan 2025 06:59:35 +0000

Deferrable views, also known as @defer blocks, reduce the initial bundle size of your application by deferring the loading of code that is not strictly necessary for the initial rendering of a page. This often results in a faster initial load and improvement in Core Web Vitals (CWV), primarily Largest Contentful Paint (LCP) and Time to First Byte (TTFB).

With Angular's defer view, developers can wrap a section of a template within a @defer block to defer its loading:

@defer {
  <large-component />
}

This ensures that the code for any components, directives, or pipes inside the @defer block is split into a separate JavaScript file and loaded only when needed, allowing the main template to render more quickly.

Key Features and Triggers of Angular Defer View

Angular defer view provides various triggers, prefetching options, and sub-blocks to manage placeholders, loading states, and error handling effectively.

Triggers
The rendering of deferred content can be controlled using specific triggers:

idle: Renders the view when the browser is idle (default behavior).
immediate: Renders the view immediately after the main content is loaded.
timer(...): Delays rendering by a specified time (e.g., on timer(500ms)).
viewport(...): Renders the view when it becomes visible in the viewport.
interaction(...): Renders the view after user interaction, such as a click or key press.
hover(...): Renders the view when the user hovers over an element.
when(...): Renders the view based on a custom condition.

Managing Different Stages of Deferred Loading

Angular's @defer blocks allow developers to define sub-blocks for different stages of content loading:

@placeholder: Displays content before the deferred section is triggered.

@defer {
  <large-component />
} @placeholder {
  <p>Loading content...</p>
}

@loading: Shows content while deferred dependencies are loading

@defer {
  <large-component />
} @loading {
  <img alt="loading..." src="loading.gif" />
}

@error: Provides fallback content if deferred loading fails

@defer {
  <large-component />
} @error {
  <p>Failed to load component.</p>
}

Prefetching

Angular allows prefetching to load deferred JavaScript files before the content is rendered. This can be specified using the prefetch option:

@defer (on interaction; prefetch on idle) {
  <large-component />
} @placeholder {
  <div>Placeholder content</div>
}

Best Practices for @defer Blocks

Avoid Nested Loads: Use different triggers for nested @defer blocks to prevent simultaneous loading spikes.

Minimize Layout Shifts: Ensure deferred components visible in the initial viewport do not disrupt layout stability.

To dive deeper into Angular defer view, check out the official Angular guide and start streamlining your web applications today!

Implement Idle Timeout in Angular

Sarmitha Krishnagobal — Wed, 21 Aug 2024 09:08:48 +0000

In today's web applications, staying logged in on a website for an extended period, whether an hour or two, can pose security risks. During this time, background API calls might still be running, and if you're not actively using the site, someone else could potentially access it with your credentials. To mitigate these risks and reduce unnecessary server requests, it's crucial to monitor user activity, such as cursor movement or key presses. If the system detects inactivity for a specified duration, it can automatically log the user out. This feature, known as Idle Timeout, is essential for modern web applications.

Let’s dive into implementing idle timeout in Angular.

idleService.ts

import { Injectable } from '@angular/core';
import { interval, Observable, Subject, Subscription, throttle } from 'rxjs';

export class IdleService {
  private idleSubject = new Subject<boolean>();
  private timeout = 1200; //seconds
  private lastActivity?: Date;
  private idleCheckInterval = 600; //seconds
  private idleSubscription?: Subscription

  constructor() { 
    this.resetTimer();
    this.startWatching();
  }

  get idleState(): Observable<boolean> {
    return this.idleSubject.asObservable();
  }

  private startWatching(): void {
    this.idleSubscription = interval(this.idleCheckInterval * 1000)
    .pipe(throttle(() => interval(1000)))
    .subscribe(() => {
      const now = new Date();

      if (now.getTime() - this.lastActivity?.getTime()! > this.timeout * 1000) {
        this.idleSubject.next(true);
      }
    });
  }

  resetTimer(): void {
    this.lastActivity = new Date();
    this.idleSubject.next(false);
  }

  stopWatching(): void {
    if (this.idleSubscription) {
      this.idleSubscription.unsubscribe();
    }
  }
}

This service monitors user activity and checks if the user has been idle for a specified duration. If so, it triggers an event through idleSubject

app.component.ts

import { inject, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { IdleService } from 'path-to-your-idleService';

export class AppComponent implements OnInit, OnDestroy {
private idleSubscription?: Subscription;
private idleService = inject(IdleService); 

ngOnInit(): void {
   this.idleSubscription = this.idleService.idleState.subscribe((isIdle) => {     
      if (isIdle) {
        console.log("user is idle");
        // Add logic for handling idle state, e.g., logging out
      } else {
       console.log("user is active");
     }
    });   
}

onUserAction(): void {
    this.idleService.resetTimer();
}

ngOnDestroy(): void {
    if (this.idleSubscription) {
      this.idleSubscription.unsubscribe();
    }
}

Subscribes to the idle state and handles the user being idle or active. It also resets the idle timer on user interactions such as mouse movements, clicks, or key presses.

app.component.html

<div  
    (mousemove)="onUserAction()"
    (click)="onUserAction()"
    (keypress)="onUserAction()"
>
    <router-outlet />
</div>

Captures user interactions to reset the idle timer whenever activity is detected.

Delaying Actions with setTimeout()⏳

Sarmitha Krishnagobal — Sat, 23 Mar 2024 11:19:05 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

The setTimeout() feature enables delaying JavaScript function execution for a specified interval. This asynchronous feature ensures smooth program operation while waiting, making it ideal for timed messages, animations, or data refreshing at intervals.

Additional Context

setTimeout() returns a timer ID that can be used to clear the timer if needed (using clearTimeout()).