From fbaf81a62fb3cc4c254df0ce69f84106f85ee50f Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Sat, 6 Dec 2025 00:42:10 +0800
Subject: [PATCH] chore: update Dockerfile and enhance loading skeleton in
 StoragePlanEditor

- Added build dependencies for native Node.js modules in the Dockerfile, including python3, make, g++, and postgresql-dev.
- Improved the loading skeleton UI in the StoragePlanEditor component for better visual representation during data fetching.

Signed-off-by: Innei <tukon479@gmail.com>
---
 Dockerfile.core                               |  2 ++
 .../dashboard/src/pages/superadmin/plans.tsx  | 35 ++++++++++++++++---
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/Dockerfile.core b/Dockerfile.core
index 8d30c27e..0206ae18 100644
--- a/Dockerfile.core
+++ b/Dockerfile.core
@@ -6,6 +6,8 @@ ENV PNPM_HOME=/pnpm
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable && corepack prepare pnpm@10.19.0 --activate
 
+RUN apk add --no-cache python3 make g++ postgresql-dev
+
 WORKDIR /workspace
 
 COPY package.json pnpm-workspace.yaml pnpm-lock.yaml ./
diff --git a/be/apps/dashboard/src/pages/superadmin/plans.tsx b/be/apps/dashboard/src/pages/superadmin/plans.tsx
index 584a9f6c..279f44db 100644
--- a/be/apps/dashboard/src/pages/superadmin/plans.tsx
+++ b/be/apps/dashboard/src/pages/superadmin/plans.tsx
@@ -224,11 +224,38 @@ function StoragePlanEditor() {
 
   if (query.isLoading) {
     return (
-      <LinearBorderPanel className="space-y-3 p-6">
-        <div className="bg-fill/40 h-6 w-32 animate-pulse rounded-full" />
-        <div className="space-y-3">
+      <LinearBorderPanel className="space-y-4 p-6">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <div className="bg-fill/40 h-6 w-48 animate-pulse rounded-md" />
+            <div className="bg-fill/30 mt-2 h-4 w-64 animate-pulse rounded-md" />
+          </div>
+          <div className="flex items-center gap-2 mb-4 ml-auto">
+            <div className="bg-fill/30 h-9 w-20 animate-pulse rounded-lg" />
+            <div className="bg-fill/30 h-9 w-20 animate-pulse rounded-lg" />
+          </div>
+        </div>
+
+        <div className="space-y-4">
           {[1, 2].map((key) => (
-            <div key={key} className="bg-fill/30 h-24 animate-pulse rounded-xl" />
+            <div key={key} className="border-fill/60 bg-fill/5 rounded-xl border p-4">
+              <div className="flex-1 space-y-3">
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <div className="space-y-1">
+                    <div className="bg-fill/30 h-3 w-16 animate-pulse rounded-md" />
+                    <div className="bg-fill/30 h-9 w-full animate-pulse rounded-lg" />
+                  </div>
+                  <div className="space-y-1">
+                    <div className="bg-fill/30 h-3 w-24 animate-pulse rounded-md" />
+                    <div className="bg-fill/30 h-9 w-full animate-pulse rounded-lg" />
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="bg-fill/30 h-3 w-32 animate-pulse rounded-md" />
+                  <div className="bg-fill/30 h-16 w-full animate-pulse rounded-lg" />
+                </div>
+              </div>
+            </div>
           ))}
         </div>
       </LinearBorderPanel>