docs: optimize image loading

adrian-ub · Oct 29, 2024 · eecfbbe · eecfbbe
1 parent 024e853
commit eecfbbe
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/docs/src/content/docs/components/aspect-ratio.mdx b/docs/src/content/docs/components/aspect-ratio.mdx
@@ -6,6 +6,8 @@ links:
   api: https://www.radix-ng.com/primitives/components/aspect-ratio#api-reference
 ---
 
+<link rel="preconnect" href="https://images.unsplash.com" />
+
 <ComponentPreview
   name="aspect-ratio-demo"
   title="Aspect Ratio"

diff --git a/docs/src/registry/default/example/aspect-ratio-demo.ts b/docs/src/registry/default/example/aspect-ratio-demo.ts
@@ -1,12 +1,20 @@
 import { UbAspectRatioDirective } from '@/registry/default/ui/aspect-ratio'
 
-import { NgOptimizedImage } from '@angular/common'
+import { IMAGE_LOADER, type ImageLoaderConfig, NgOptimizedImage } from '@angular/common'
 import { Component } from '@angular/core'
 
 @Component({
   standalone: true,
   selector: 'aspect-ratio-demo-default',
   imports: [UbAspectRatioDirective, NgOptimizedImage],
+  providers: [
+    {
+      provide: IMAGE_LOADER,
+      useValue: (config: ImageLoaderConfig) => {
+        return `${config?.src}?w=${config?.width}`
+      },
+    },
+  ],
   template: `
   <div class="w-96">
     <div ubAspectRatio [ratio]="16 / 9" class="bg-muted">
@@ -18,6 +26,7 @@ import { Component } from '@angular/core'
           ngSrcset="640w, 750w, 828w, 1080w, 1200w, 1920w, 2048w, 3840w"
           sizes="100vw"
           style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
+          priority
         />
     </div>
   </div>

diff --git a/docs/src/registry/new-york/example/aspect-ratio-demo.ts b/docs/src/registry/new-york/example/aspect-ratio-demo.ts
@@ -1,23 +1,32 @@
 import { UbAspectRatioDirective } from '@/registry/new-york/ui/aspect-ratio'
 
-import { NgOptimizedImage } from '@angular/common'
+import { IMAGE_LOADER, type ImageLoaderConfig, NgOptimizedImage } from '@angular/common'
 import { Component } from '@angular/core'
 
 @Component({
   standalone: true,
   selector: 'aspect-ratio-demo-new-york',
   imports: [UbAspectRatioDirective, NgOptimizedImage],
+  providers: [
+    {
+      provide: IMAGE_LOADER,
+      useValue: (config: ImageLoaderConfig) => {
+        return `${config?.src}?w=${config?.width}`
+      },
+    },
+  ],
   template: `
   <div class="w-96">
     <div ubAspectRatio [ratio]="16 / 9" class="bg-muted">
         <img
-          ngSrc="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+          ngSrc="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd"
           alt="Photo by Drew Beamer"
           fill
           class="h-full w-full rounded-md object-cover"
           ngSrcset="640w, 750w, 828w, 1080w, 1200w, 1920w, 2048w, 3840w"
           sizes="100vw"
           style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
+          priority
         />
     </div>
   </div>