optimize loading img in hero section

ahmaddzidnii · ahmaddzidnii · commit a1cb8f27a9b8 · 2025-10-05T19:39:55.000+07:00
diff --git a/index.html b/index.html
@@ -18,11 +18,67 @@
       href="https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap"
       rel="stylesheet"
     />
-
     <title>Pak Tani</title>
+
+    <style>
+      body {
+        margin: 0;
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+          "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+          sans-serif;
+        background-color: #fff;
+      }
+
+      .app-loader-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        gap: 24px;
+      }
+
+      .app-loader-container img {
+        width: 80px;
+        height: 80px;
+      }
+
+      .app-loader-container p {
+        font-size: 1.1rem;
+        color: #4a4a4a;
+        margin: 0;
+      }
+
+      .arc-spinner {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+
+        border: 4px solid transparent;
+        border-top-color: #888;
+
+        animation: spin 1s linear infinite;
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <div class="app-loader-container">
+        <img src="/icon-smart-farming.png" alt="Logo Pak Tani" />
+        <p>Dashboard Pak Tani sedang dimuat...</p>
+        <div class="arc-spinner"></div>
+      </div>
+    </div>
     <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,11 +14,13 @@
   "dependencies": {
     "@fontsource/rubik": "^5.2.8",
     "@tailwindcss/vite": "^4.1.13",
+    "blurhash": "^2.0.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "nprogress": "^0.2.0",
     "react": "^19.1.1",
     "react-aria-components": "^1.13.0",
+    "react-blurhash": "^0.3.0",
     "react-dom": "^19.1.1",
     "react-icons": "^5.5.0",
     "react-router": "^7.9.1",
diff --git a/src/components/ui/button.jsx b/src/components/ui/button.jsx
@@ -1,6 +1,6 @@
-import { forwardRef, cloneElement, isValidElement } from "react";
 import { cva } from "class-variance-authority";
 import { Button as AriaButton } from "react-aria-components";
+import { forwardRef, cloneElement, isValidElement } from "react";
 
 import { cn } from "../../utils/cn";
 
diff --git a/src/features/core-app/components/core-app-header.jsx b/src/features/core-app/components/core-app-header.jsx
@@ -64,10 +64,10 @@ export const CoreAppHeader = () => {
 
         {/* Navigasi Desktop */}
         <div className="hidden xl:flex items-center space-x-8">
-          {CORE_APP_NAV_ITEMS.map((item, index) => (
+          {CORE_APP_NAV_ITEMS.map((item) => (
             <Link
               to={item.href}
-              key={index}
+              key={`core-app-nav-item-${item.label}`}
               className={cn(
                 "text-[20px]",
                 getIsActivePath(item.href)
@@ -135,9 +135,9 @@ export const CoreAppHeader = () => {
         )}
       >
         <div className="flex flex-col items-center py-4">
-          {CORE_APP_NAV_ITEMS.map((item, index) => (
+          {CORE_APP_NAV_ITEMS.map((item) => (
             <Link
-              key={index}
+              key={`mobile-core-app-nav-item-${item.label}`}
               to={item.href}
               onClick={() => setIsMenuOpen(false)}
               className={cn(
diff --git a/src/pages/core-app/history-page.jsx b/src/pages/core-app/history-page.jsx
@@ -1,3 +1,73 @@
+import { FaPlus } from "react-icons/fa6";
+import { FaSearch } from "react-icons/fa";
+
+import { Button } from "../../components/ui/button";
+import { Input, TextField } from "../../components/ui/input";
+
 export const HistoryPage = () => {
-  return <div>History page!</div>;
+  return (
+    <div className="app-container">
+      <h1 className="clash-display-font font-semibold  text-lg lg:text-[28px] tracking-wider mb-5">
+        Mencatat aktivitas yang terjadi pada sistem
+      </h1>
+
+      <div className="my-5">
+        <h2 className="font-semibold text-lg lg:text-[20px] tracking-wider my-5">
+          Cari Riwayat
+        </h2>
+
+        <div className="grid grid-cols-12 gap-4 md:gap-2">
+          {/* Input Pencarian */}
+          <div className="col-span-12 lg:col-span-9 h-[54px]">
+            <div className="relative h-full w-full">
+              <FaSearch
+                aria-hidden="true"
+                className="
+                absolute top-1/2 left-5 -translate-y-1/2 
+                text-zinc-500 pointer-events-none
+                peer-focus:hidden transition-opacity
+              "
+              />
+              <TextField className="h-full">
+                <Input
+                  type="text"
+                  placeholder="Search"
+                  className="rounded-[30px] h-full pl-12 peer"
+                />
+              </TextField>
+            </div>
+          </div>
+
+          {/* Tombol Filter */}
+          <Button
+            variant="ghost"
+            className="col-span-3 lg:col-span-1 bg-white hover:bg-white/70 size-[54px] aspect-square rounded-full mx-auto flex items-center justify-center"
+          >
+            <svg
+              width={19}
+              height={19}
+              viewBox="0 0 19 19"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.0875 1.18164C6.35435 1.18126 5.63914 1.40827 5.04042 1.83139C4.44169 2.25452 3.98894 2.85293 3.74456 3.54414H0V5.90664H3.74456C3.98861 6.5983 4.44119 7.19724 5.03992 7.62088C5.63865 8.04453 6.35405 8.27204 7.0875 8.27204C7.82095 8.27204 8.53635 8.04453 9.13508 7.62088C9.73381 7.19724 10.1864 6.5983 10.4304 5.90664H18.9V3.54414H10.4304C10.1861 2.85293 9.73331 2.25452 9.13458 1.83139C8.53586 1.40827 7.82064 1.18126 7.0875 1.18164ZM5.90625 4.72539C5.90625 4.4121 6.0307 4.11165 6.25223 3.89012C6.47376 3.66859 6.77421 3.54414 7.0875 3.54414C7.40079 3.54414 7.70124 3.66859 7.92277 3.89012C8.1443 4.11165 8.26875 4.4121 8.26875 4.72539C8.26875 5.03868 8.1443 5.33913 7.92277 5.56066C7.70124 5.78219 7.40079 5.90664 7.0875 5.90664C6.77421 5.90664 6.47376 5.78219 6.25223 5.56066C6.0307 5.33913 5.90625 5.03868 5.90625 4.72539ZM11.8125 10.6316C11.0794 10.6313 10.3641 10.8583 9.76542 11.2814C9.16669 11.7045 8.71394 12.3029 8.46956 12.9941H0V15.3566H8.46956C8.71361 16.0483 9.16619 16.6472 9.76492 17.0709C10.3636 17.4945 11.079 17.722 11.8125 17.722C12.546 17.722 13.2613 17.4945 13.8601 17.0709C14.4588 16.6472 14.9114 16.0483 15.1554 15.3566H18.9V12.9941H15.1554C14.9111 12.3029 14.4583 11.7045 13.8596 11.2814C13.2609 10.8583 12.5456 10.6313 11.8125 10.6316ZM10.6312 14.1754C10.6312 13.8621 10.7557 13.5616 10.9772 13.3401C11.1988 13.1186 11.4992 12.9941 11.8125 12.9941C12.1258 12.9941 12.4262 13.1186 12.6478 13.3401C12.8693 13.5616 12.9937 13.8621 12.9937 14.1754C12.9937 14.4887 12.8693 14.7891 12.6478 15.0107C12.4262 15.2322 12.1258 15.3566 11.8125 15.3566C11.4992 15.3566 11.1988 15.2322 10.9772 15.0107C10.7557 14.7891 10.6312 14.4887 10.6312 14.1754Z"
+                className="fill-primary"
+              />
+            </svg>
+          </Button>
+
+          {/* Tombol Tambah Module */}
+          <div className="col-span-9 lg:col-span-2">
+            <Button
+              className="h-[54px] w-full inline-flex text-base"
+              variant="outline"
+            >
+              <FaPlus className="size-5 mr-4" /> Tambah Module
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
diff --git a/src/pages/landing-page/home-page.jsx b/src/pages/landing-page/home-page.jsx
@@ -3,26 +3,54 @@ import backgroundImage from "../../assets/hero-image-bg.png";
 
 import { Button } from "../../components/ui/button";
 import { FEATURES } from "../../constants/landing-page-config.jsx";
+import { Blurhash } from "react-blurhash";
+import { useEffect, useState } from "react";
 
 export const HomePage = () => {
+  const [loaded, setLoaded] = useState(false);
+
+  const HERO_BLURHASH = "LlI#fGM{tQn~O[NJnPR,_4V[kVae";
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = backgroundImage;
+    img.onload = () => setLoaded(true);
+  }, []);
+
   return (
     <div>
       {/* Hero */}
-      <div
-        className="bg-surface h-[500px] md:h-[600px] lg:h-[712px] flex items-center"
-        style={{
-          backgroundImage: `url(${backgroundImage})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-      >
-        <div className="container mx-auto px-6 lg:px-[89px] pt-0 lg:pt-32">
+      <div className="relative h-[500px] md:h-[600px] lg:h-[712px] flex items-center overflow-hidden">
+        {/* Blurhash sebagai placeholder */}
+        {!loaded && (
+          <div className="absolute inset-0 w-full h-full">
+            <Blurhash
+              hash={HERO_BLURHASH}
+              width={"100%"}
+              height={"100%"}
+              resolutionX={32}
+              resolutionY={32}
+              punch={1}
+            />
+          </div>
+        )}
+
+        {/* Background image utama */}
+        <div
+          className={`absolute inset-0 w-full h-full bg-center bg-cover transition-opacity duration-200 ${
+            loaded ? "opacity-100" : "opacity-0"
+          }`}
+          style={{
+            backgroundImage: `url(${backgroundImage})`,
+          }}
+        />
+
+        {/* Konten hero */}
+        <div className="container relative mx-auto px-6 lg:px-[89px] pt-0 lg:pt-32 z-10">
           <div className="max-w-full lg:max-w-[665px] text-center lg:text-left">
-            {/* Penyesuaian font H1 */}
             <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-text-invers">
               Selamat Datang di Pak Tani!
             </h1>
-            {/* Penyesuaian font Paragraf */}
             <p className="text-base md:text-lg lg:text-xl text-text-invers mt-2">
               Kelola dan pantau sistem irigasi pertanian Anda dengan mudah,
               langsung dari genggaman Anda.
@@ -55,9 +83,9 @@ export const HomePage = () => {
             </p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-12 lg:mt-[61px] gap-8 lg:gap-[58px]">
-            {FEATURES.map((feature, i) => (
+            {FEATURES.map((feature) => (
               <div
-                key={i}
+                key={feature.title}
                 className="bg-white w-full h-auto rounded-[20px] px-6 py-10 lg:px-[38px] lg:pt-[59px] shadow-md flex justify-center"
               >
                 <div className="flex flex-col items-center gap-4 text-center">
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -27,6 +27,8 @@
 body {
   @apply bg-background text-text;
 
+  min-width: 300px;
+
   font-family: "Rubik", sans-serif;
   overflow-y: scroll;
   scrollbar-gutter: auto;
