diff --git a/src/renderer/pages/game-details/game-details-skeleton.tsx b/src/renderer/pages/game-details/game-details-skeleton.tsx
new file mode 100644
index 000000000..73caef4fe
--- /dev/null
+++ b/src/renderer/pages/game-details/game-details-skeleton.tsx
@@ -0,0 +1,98 @@
+import Skeleton from "react-loading-skeleton";
+
+import { Button } from "@renderer/components";
+import * as styles from "./game-details.css";
+import { useTranslation } from "react-i18next";
+import { ShareAndroidIcon } from "@primer/octicons-react";
+
+export function GameDetailsSkeleton() {
+  const { t } = useTranslation("game_details");
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.hero}>
+        <Skeleton className={styles.heroImageSkeleton} />
+      </div>
+      <div className={styles.descriptionHeader}>
+        <section className={styles.descriptionHeaderInfo}>
+          <Skeleton width={155} />
+          <Skeleton width={135} />
+        </section>
+
+        <div className={styles.heroFooterButtonsSkeleton}>
+          <Button theme="outline" disabled>
+            {t("add_to_library")}
+          </Button>
+          <Button theme="outline" disabled>
+            {t("open_download_options")}
+          </Button>
+        </div>
+      </div>
+      <div className={styles.descriptionContainer}>
+        <div className={styles.descriptionContent}>
+          <div className={styles.descriptionHeader}>
+            <section className={styles.descriptionHeaderInfo}>
+              <Skeleton width={145} />
+              <Skeleton width={150} />
+            </section>
+            <Button theme="outline" disabled>
+              <ShareAndroidIcon />
+              {t("copy_link_to_clipboard")}
+            </Button>
+          </div>
+          <div className={styles.descriptionSkeleton}>
+            {Array.from({ length: 3 }).map((_, index) => (
+              <Skeleton key={index} />
+            ))}
+            <Skeleton className={styles.heroImageSkeleton} />
+            {Array.from({ length: 2 }).map((_, index) => (
+              <Skeleton key={index} />
+            ))}
+            <Skeleton className={styles.heroImageSkeleton} />
+            <Skeleton />
+          </div>
+        </div>
+        <div className={styles.contentSidebar}>
+          <div className={styles.contentSidebarTitle}>
+            <h3>HowLongToBeat</h3>
+          </div>
+          <ul className={styles.howLongToBeatCategoriesList}>
+            {Array.from({ length: 3 }).map((_, index) => (
+              <Skeleton
+                key={index}
+                className={styles.howLongToBeatCategorySkeleton}
+              />
+            ))}
+          </ul>
+          <div
+            className={styles.contentSidebarTitle}
+            style={{ border: "none" }}
+          >
+            <h3>{t("requirements")}</h3>
+          </div>
+          <div className={styles.requirementButtonContainer}>
+            <Button
+              className={styles.requirementButton}
+              theme="primary"
+              disabled
+            >
+              {t("minimum")}
+            </Button>
+            <Button
+              className={styles.requirementButton}
+              theme="outline"
+              disabled
+            >
+              {t("recommended")}
+            </Button>
+          </div>
+          <div className={styles.requirementsDetailsSkeleton}>
+            {Array.from({ length: 6 }).map((_, index) => (
+              <Skeleton key={index} height={20} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/renderer/pages/game-details/game-details.css.ts b/src/renderer/pages/game-details/game-details.css.ts
index aa2ca1db5..6145b9aed 100644
--- a/src/renderer/pages/game-details/game-details.css.ts
+++ b/src/renderer/pages/game-details/game-details.css.ts
@@ -34,6 +34,12 @@ export const heroBackdrop = style({
   justifyContent: "space-between",
 });
 
+export const heroFooterButtonsSkeleton = style({
+  display: "flex",
+  flexDirection: "row",
+  gap: `${SPACING_UNIT}px`,
+});
+
 export const heroImage = style({
   width: "100%",
   height: "100%",
@@ -47,6 +53,15 @@ export const heroImage = style({
   },
 });
 
+export const heroImageSkeleton = style({
+  height: "300px",
+  "@media": {
+    "(min-width: 1250px)": {
+      height: "350px",
+    },
+  },
+});
+
 export const container = style({
   width: "100%",
   height: "100%",
@@ -114,6 +129,14 @@ export const requirementsDetails = style({
   fontSize: "16px",
 });
 
+export const requirementsDetailsSkeleton = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px",
+  padding: `${SPACING_UNIT * 2}px`,
+  fontSize: "16px",
+});
+
 export const description = style({
   userSelect: "text",
   lineHeight: "22px",
@@ -130,6 +153,22 @@ export const description = style({
   marginRight: "auto",
 });
 
+export const descriptionSkeleton = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: `${SPACING_UNIT}px`,
+  padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
+  width: "100%",
+  "@media": {
+    "(min-width: 1280px)": {
+      width: "60%",
+      lineHeight: "22px",
+    },
+  },
+  marginLeft: "auto",
+  marginRight: "auto",
+});
+
 export const descriptionHeader = style({
   width: "100%",
   padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
diff --git a/src/renderer/pages/game-details/game-details.tsx b/src/renderer/pages/game-details/game-details.tsx
index 3ebab32f2..434cf2076 100644
--- a/src/renderer/pages/game-details/game-details.tsx
+++ b/src/renderer/pages/game-details/game-details.tsx
@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
 import Color from "color";
 import { average } from "color.js";
+import { useCallback, useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 
 import type {
   Game,
@@ -13,21 +13,25 @@ import type {
 
 import { AsyncImage, Button } from "@renderer/components";
 import { setHeaderTitle } from "@renderer/features";
-import { useAppDispatch, useDownload } from "@renderer/hooks";
 import { getSteamLanguage, steamUrlBuilder } from "@renderer/helpers";
+import { useAppDispatch, useDownload } from "@renderer/hooks";
 
+import { ShareAndroidIcon } from "@primer/octicons-react";
+import { vars } from "@renderer/theme.css";
+import { useTranslation } from "react-i18next";
+import { SkeletonTheme } from "react-loading-skeleton";
+import { GameDetailsSkeleton } from "./game-details-skeleton";
 import * as styles from "./game-details.css";
-import { RepacksModal } from "./repacks-modal";
 import { HeroPanel } from "./hero-panel";
-import { useTranslation } from "react-i18next";
-import { ShareAndroidIcon } from "@primer/octicons-react";
 import { HowLongToBeatSection } from "./how-long-to-beat-section";
+import { RepacksModal } from "./repacks-modal";
 
 const OPEN_HYDRA_URL = "https://open.hydralauncher.site";
 
 export function GameDetails() {
   const { objectID, shop } = useParams();
 
+  const [isLoading, setIsLoading] = useState(false);
   const [color, setColor] = useState("");
   const [clipboardLock, setClipboardLock] = useState(false);
   const [gameDetails, setGameDetails] = useState<ShopDetails | null>(null);
@@ -69,6 +73,7 @@ export function GameDetails() {
   }, [getGame, gameDownloading?.id]);
 
   useEffect(() => {
+    setIsLoading(true);
     dispatch(setHeaderTitle(""));
 
     window.electron
@@ -87,6 +92,9 @@ export function GameDetails() {
 
         setGameDetails(result);
         dispatch(setHeaderTitle(result.name));
+      })
+      .finally(() => {
+        setIsLoading(false);
       });
 
     getGame();
@@ -143,7 +151,7 @@ export function GameDetails() {
   };
 
   return (
-    <>
+    <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
       {gameDetails && (
         <RepacksModal
           visible={showRepacksModal}
@@ -153,114 +161,120 @@ export function GameDetails() {
         />
       )}
 
-      <section className={styles.container}>
-        <div className={styles.hero}>
-          <AsyncImage
-            src={steamUrlBuilder.libraryHero(objectID)}
-            className={styles.heroImage}
-            alt={game?.title}
-            onSettled={handleImageSettled}
-          />
-          <div className={styles.heroBackdrop}>
-            <div className={styles.heroContent}>
-              <AsyncImage
-                src={steamUrlBuilder.logo(objectID)}
-                style={{ width: 300, alignSelf: "flex-end" }}
-              />
+      {isLoading ? (
+        <GameDetailsSkeleton />
+      ) : (
+        <section className={styles.container}>
+          <div className={styles.hero}>
+            <AsyncImage
+              src={steamUrlBuilder.libraryHero(objectID)}
+              className={styles.heroImage}
+              alt={game?.title}
+              onSettled={handleImageSettled}
+            />
+            <div className={styles.heroBackdrop}>
+              <div className={styles.heroContent}>
+                <AsyncImage
+                  src={steamUrlBuilder.logo(objectID)}
+                  style={{ width: 300, alignSelf: "flex-end" }}
+                />
+              </div>
             </div>
           </div>
-        </div>
 
-        <HeroPanel
-          game={game}
-          color={color}
-          gameDetails={gameDetails}
-          openRepacksModal={() => setShowRepacksModal(true)}
-          getGame={getGame}
-        />
+          <HeroPanel
+            game={game}
+            color={color}
+            gameDetails={gameDetails}
+            openRepacksModal={() => setShowRepacksModal(true)}
+            getGame={getGame}
+          />
 
-        <div className={styles.descriptionContainer}>
-          <div className={styles.descriptionContent}>
-            <div className={styles.descriptionHeader}>
-              <section className={styles.descriptionHeaderInfo}>
-                <p>
-                  {t("release_date", {
-                    date: gameDetails?.release_date.date,
-                  })}
-                </p>
-                <p>
-                  {t("publisher", { publisher: gameDetails?.publishers[0] })}
-                </p>
-              </section>
-
-              <Button
-                theme="outline"
-                onClick={handleCopyToClipboard}
-                disabled={clipboardLock || !gameDetails}
-              >
-                {clipboardLock ? (
-                  t("copied_link_to_clipboard")
-                ) : (
-                  <>
-                    <ShareAndroidIcon />
-                    {t("copy_link_to_clipboard")}
-                  </>
-                )}
-              </Button>
+          <div className={styles.descriptionContainer}>
+            <div className={styles.descriptionContent}>
+              <div className={styles.descriptionHeader}>
+                <section className={styles.descriptionHeaderInfo}>
+                  <p>
+                    {t("release_date", {
+                      date: gameDetails?.release_date.date,
+                    })}
+                  </p>
+                  <p>
+                    {t("publisher", { publisher: gameDetails?.publishers[0] })}
+                  </p>
+                </section>
+
+                <Button
+                  theme="outline"
+                  onClick={handleCopyToClipboard}
+                  disabled={clipboardLock || !gameDetails}
+                >
+                  {clipboardLock ? (
+                    t("copied_link_to_clipboard")
+                  ) : (
+                    <>
+                      <ShareAndroidIcon />
+                      {t("copy_link_to_clipboard")}
+                    </>
+                  )}
+                </Button>
+              </div>
+
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: gameDetails?.about_the_game ?? "",
+                }}
+                className={styles.description}
+              />
             </div>
 
-            <div
-              dangerouslySetInnerHTML={{
-                __html: gameDetails?.about_the_game ?? "",
-              }}
-              className={styles.description}
-            />
-          </div>
-
-          <div className={styles.contentSidebar}>
-            <HowLongToBeatSection
-              howLongToBeatData={howLongToBeat.data}
-              isLoading={howLongToBeat.isLoading}
-            />
-
-            <div
-              className={styles.contentSidebarTitle}
-              style={{ border: "none" }}
-            >
-              <h3>{t("requirements")}</h3>
-            </div>
+            <div className={styles.contentSidebar}>
+              <HowLongToBeatSection
+                howLongToBeatData={howLongToBeat.data}
+                isLoading={howLongToBeat.isLoading}
+              />
 
-            <div className={styles.requirementButtonContainer}>
-              <Button
-                className={styles.requirementButton}
-                onClick={() => setActiveRequirement("minimum")}
-                theme={activeRequirement === "minimum" ? "primary" : "outline"}
-              >
-                {t("minimum")}
-              </Button>
-              <Button
-                className={styles.requirementButton}
-                onClick={() => setActiveRequirement("recommended")}
-                theme={
-                  activeRequirement === "recommended" ? "primary" : "outline"
-                }
+              <div
+                className={styles.contentSidebarTitle}
+                style={{ border: "none" }}
               >
-                {t("recommended")}
-              </Button>
+                <h3>{t("requirements")}</h3>
+              </div>
+
+              <div className={styles.requirementButtonContainer}>
+                <Button
+                  className={styles.requirementButton}
+                  onClick={() => setActiveRequirement("minimum")}
+                  theme={
+                    activeRequirement === "minimum" ? "primary" : "outline"
+                  }
+                >
+                  {t("minimum")}
+                </Button>
+                <Button
+                  className={styles.requirementButton}
+                  onClick={() => setActiveRequirement("recommended")}
+                  theme={
+                    activeRequirement === "recommended" ? "primary" : "outline"
+                  }
+                >
+                  {t("recommended")}
+                </Button>
+              </div>
+              <div
+                className={styles.requirementsDetails}
+                dangerouslySetInnerHTML={{
+                  __html:
+                    gameDetails?.pc_requirements?.[activeRequirement] ??
+                    t(`no_${activeRequirement}_requirements`, {
+                      title: gameDetails?.name,
+                    }),
+                }}
+              ></div>
             </div>
-            <div
-              className={styles.requirementsDetails}
-              dangerouslySetInnerHTML={{
-                __html:
-                  gameDetails?.pc_requirements?.[activeRequirement] ??
-                  t(`no_${activeRequirement}_requirements`, {
-                    title: gameDetails?.name,
-                  }),
-              }}
-            ></div>
           </div>
-        </div>
-      </section>
-    </>
+        </section>
+      )}
+    </SkeletonTheme>
   );
 }