@autobusal/common 1.7.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,32 @@
 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
+
+- **GA4 SPA pageview tracking in `Meta`.** gtag.js only auto-sends a
+  page_view on its initial `config` call - every client-side route change
+  was invisible to analytics (pairs with `@autobusal/providers` 1.6.2, which
+  disables the automatic one). Meta now sends an explicit pageview
+  (`location.pathname + location.search`, current title) whenever the path
+  changes, since it's already rendered on nearly every real page. Excluded
+  from the effect's dependencies on purpose: a title-only change (e.g. a
+  language switch) does not fire a new pageview, only an actual navigation
+  does.
+
 ## [1.7.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/Meta.tsx

@@ -1,5 +1,7 @@
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
+import ReactGA from 'react-ga4';
+import { useGetSettings } from '@autobusal/providers/services';
 
 interface Props {
   title: string
@@ -70,11 +72,37 @@ const useCanonicalUrl = (explicit?: string): string => {
   return explicit ?? `${ window.location.origin }${ location.pathname }`;
 };
 
+// GA4's gtag.js only auto-sends a page_view on its initial `config` call
+// (see providers/Setup/analytics.ts, which disables that and initializes
+// with send_page_view: false) - every client-side route change in this SPA
+// was otherwise invisible to analytics. Meta is the one component rendered
+// on nearly every real page (136 call sites across both apps), already
+// tracks the canonical path via useLocation, and mounts fresh on every
+// navigation - the natural place to fire the pageview React Router itself
+// doesn't have a dedicated hook for. The 2-3 truly Meta-less pages (a
+// redirect-only auth callback, an invalid-signature bounce) aren't
+// meaningful page views anyway.
+const usePageviewTracking = (path: string, title: string): void => {
+  const { data: settings } = useGetSettings();
+  const gaId = settings.preferences.googleAnalyticsID;
+
+  useEffect(() => {
+    if (gaId === null) {
+      return;
+    }
+
+    ReactGA.send({ hitType: 'pageview', page: path, title });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gaId, path]);
+};
+
 const Meta = ({ title, keywords, description, image, url, type = 'website', noIndex = false, children }: Props): JSX.Element => {
   const fullTitle = withBrand(title);
   const canonicalUrl = useCanonicalUrl(url);
+  const location = useLocation();
 
   useSoleTitleOwnership(fullTitle);
+  usePageviewTracking(location.pathname + location.search, fullTitle);
 
   return (
     <>

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.7.0",
+  "version": "1.8.1",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"