From 785e9fd2fd561c0ac47ec52506f9c2cbee792366 Mon Sep 17 00:00:00 2001
From: Sviatoslav Makhynko <sviat.mak@gmail.com>
Date: Tue, 17 Sep 2024 22:46:11 +0200
Subject: [PATCH] preload hero image

---
 .../sections/welcome/Hero/index.tsx           | 60 ++++++++++---------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/components/sections/welcome/Hero/index.tsx b/src/components/sections/welcome/Hero/index.tsx
index 147a08e78..0963c3ea3 100644
--- a/src/components/sections/welcome/Hero/index.tsx
+++ b/src/components/sections/welcome/Hero/index.tsx
@@ -2,41 +2,45 @@ import Link from '@docusaurus/Link';
 import clsx from 'clsx';
 
 import GithubButton from '@site/src/components/GithubButton';
-// import HeroFamily from '@site/static/images/logo/hero-family.svg';
 import styles from './styles.module.scss';
 
+const heroImageSrc = '/images/logo/hero-family.webp';
+
 export default function Hero() {
   return (
-    <header className={styles.section}>
-      <div className={clsx('container', styles.sectionContent)}>
-        <div>
-          <h1 className={styles.sectionTitle}>
-            Greetings,
-            <br /> Java <span className="text--primary">Hipster</span>!
-          </h1>
+    <>
+      <link rel="preload" as="image" href={heroImageSrc} />
+
+      <header className={styles.section}>
+        <div className={clsx('container', styles.sectionContent)}>
+          <div>
+            <h1 className={styles.sectionTitle}>
+              Greetings,
+              <br /> Java <span className="text--primary">Hipster</span>!
+            </h1>
 
-          <p className={styles.sectionDescription}>
-            JHipster is a development platform to quickly generate, develop, and
-            deploy modern web applications & microservice architectures.
-          </p>
+            <p className={styles.sectionDescription}>
+              JHipster is a development platform to quickly generate, develop,
+              and deploy modern web applications & microservice architectures.
+            </p>
 
-          <div className={styles.sectionButtons}>
-            <Link className="button button--primary" to="/getting-started">
-              Getting Started
-            </Link>
-            <GithubButton>GitHub</GithubButton>
+            <div className={styles.sectionButtons}>
+              <Link className="button button--primary" to="/getting-started">
+                Getting Started
+              </Link>
+              <GithubButton>GitHub</GithubButton>
+            </div>
           </div>
-        </div>
 
-        <img
-          className={styles.sectionImage}
-          src="/images/logo/hero-family.webp"
-          alt="JHipster family"
-          width={476}
-          height={380}
-        />
-        {/* <HeroFamily className={styles.sectionImage} /> */}
-      </div>
-    </header>
+          <img
+            className={styles.sectionImage}
+            src={heroImageSrc}
+            alt="JHipster family"
+            width={476}
+            height={380}
+          />
+        </div>
+      </header>
+    </>
   );
 }