@autobusal/common 1.8.0 → 1.8.1

package/BlogItem/Image.tsx

@@ -8,16 +8,20 @@ interface Props {
 }
 
 const Image = ({ type, internal, image_url, title }: Props): JSX.Element => {
+  // preview/short are grid/sidebar thumbnails - often several per page,
+  // frequently below the fold, so they're deferred. type="view" is the
+  // single article's own hero image, likely this page's LCP element, so it
+  // loads eagerly at high priority instead.
   if (type === 'preview' || type === 'short') {
     return (
       <ImageLink to={ `/blog/article/${ internal }` }>
-        <ContainerImage src={ image_url } alt={ title } />
+        <ContainerImage src={ image_url } alt={ title } loading="lazy" decoding="async" />
       </ImageLink>
     );
   }
 
   return (
-    <ContainerImage src={ image_url } alt={ title } />
+    <ContainerImage src={ image_url } alt={ title } loading="eager" fetchPriority="high" />
   );
 };
 

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to `@autobusal/common` are documented here. This project follows
 [Keep a Changelog](https://keepachangelog.com/) and [Semantic Versioning](https://semver.org/).
 
+## [1.8.1] - 2026-07-30
+
+### Fixed
+
+- **Added `loading="lazy" decoding="async"` to below-the-fold list images**
+  (`BlogItem/Image.tsx` preview/short thumbnails, `CompanyItem.tsx`,
+  `RouteItem.tsx` operator logos) - none had lazy loading, so a search
+  results page or operator/agent listing loaded every logo eagerly
+  regardless of position. `BlogItem/Image.tsx`'s `type="view"` (the single
+  article's own hero image, likely that page's LCP element) instead gets
+  `loading="eager" fetchPriority="high"`.
+
 ## [1.8.0] - 2026-07-30
 
 ### Added

package/CompanyItem/CompanyItem.tsx

@@ -16,12 +16,12 @@ const CompanyItem = ({ item, type }: Props): JSX.Element => {
       { type === 'operator'
         ? (
           <LinkLogo to={ item.link }>
-            <img src={ item.logo_url } alt={ item.company } />
+            <img src={ item.logo_url } alt={ item.company } loading="lazy" decoding="async" />
           </LinkLogo>
         )
         : (
           <ContainerLogo>
-            <img src={ item.logo_url } alt={ item.company } />
+            <img src={ item.logo_url } alt={ item.company } loading="lazy" decoding="async" />
           </ContainerLogo>
         ) }
 

package/RouteItem/RouteItem.tsx

@@ -21,7 +21,7 @@ const RouteItem = ({ type, route, t }: Props): JSX.Element => {
       <About>
         <Image>
           <Logo to={ route.operator.link }>
-            <img src={ route.operator.logo_url } alt={ route.operator.company } />
+            <img src={ route.operator.logo_url } alt={ route.operator.company } loading="lazy" decoding="async" />
           </Logo>
         </Image>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"