Reverting the prefetch page and adding lazy loading

SSWConsulting · Oct 1, 2024 · d804cbb · d804cbb
1 parent d92b65d
commit d804cbb
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/components/blocks/flag.tsx b/components/blocks/flag.tsx
@@ -22,6 +22,7 @@ export const Flag = ({ country, height, width, className = "" }: FlagProps) => {
         width={width || 35}
         height={height || 35}
         alt="country"
+        loading="lazy"
       />
     </>
   );

diff --git a/components/blocks/serviceCards.tsx b/components/blocks/serviceCards.tsx
@@ -5,7 +5,6 @@ const Image = dynamic(() => import("next/image"), { ssr: false });
 import type { Template } from "tinacms";
 
 import dynamic from "next/dynamic";
-import Link from "next/link";
 import { CustomLink } from "../customLink";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
@@ -77,10 +76,9 @@ const BigCards = ({ title, cards, schema }) => {
               bgColor[card.color]
             } hover:opacity-80`}
           >
-            <Link
+            <CustomLink
               href={card.link ?? ""}
               className="unstyled flex grow text-left text-white"
-              prefetch={false}
             >
               <div className="flex grow flex-col">
                 {card?.imgSrc && (
@@ -121,7 +119,7 @@ const BigCards = ({ title, cards, schema }) => {
                   )}
                 </div>
               </div>
-            </Link>
+            </CustomLink>
           </li>
         ))}
       </ul>

diff --git a/components/blocks/verticalImageLayout.tsx b/components/blocks/verticalImageLayout.tsx
@@ -11,6 +11,7 @@ const RawImage = ({ data }) => {
       height={data.height ?? 0}
       width={data.width ?? 0}
       sizes={data.sizes}
+      loading="lazy"
     />
   );
 };