Merge pull request #16 from peres07/main

feat: add a loading skeleton to game details page.
hydralauncher · Apr 16, 2024 · f5fc765 · f5fc765
2 parents 1793888 + 5240fe1
commit f5fc765
Show file tree

Hide file tree

Showing 3 changed files with 257 additions and 106 deletions.
diff --git a/src/renderer/pages/game-details/game-details-skeleton.tsx 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
@@ -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`,