Merge pull request #71 from TU-GitLio/design/#70

(#70) Skeleton when loading on dashboard page
TU-GitLio · Jun 19, 2024 · 2e5e634 · 2e5e634
2 parents f67aa73 + 123e9fe
commit 2e5e634
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/gitlio/app/editor/layout.tsx b/gitlio/app/editor/layout.tsx
@@ -60,8 +60,8 @@ const EditorLayout: React.FC<{ children: React.ReactNode }> = ({
           {/*<div className="fixed left-0 top-16 bottom-0">*/}
           {/*  <LeftSidebar />*/}
           {/*</div>*/}
-          <div className="flex flex-col flex-grow mt-24 overflow-auto">
-            <div className="px-4 ml-60 mb-16">{children}</div>
+          <div className="flex flex-col flex-grow mt-24 overflow-auto mr-[450px] mb-16 justify-center items-center">
+            <div className="px-4">{children}</div>
           </div>
           <div className="fixed right-0 top-16 bottom-0">
             <BaseSideBar />

diff --git a/gitlio/app/studio/dashboard/page.tsx b/gitlio/app/studio/dashboard/page.tsx
@@ -5,6 +5,7 @@ import { useUserStore } from '@/store/userStore';
 import { getIdAfterLogin, getUserPortfolios } from '@/actions/user';
 import PortfolioComponent from '@/components/PortfolioComponent';
 import { useRouter } from 'next/navigation';
+import PortfolioSkeleton from '@/components/PortfolioSkeleton';
 
 export default function DashboardPage() {
   const { isSignedIn, user, isLoaded } = useUser();
@@ -69,7 +70,7 @@ export default function DashboardPage() {
   }, [isSignedIn, user, userId]); // 의존성 배열을 최적화하여 필요한 변수들만 포함시킴
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <PortfolioSkeleton />;
   }
 
   return (

diff --git a/gitlio/components/PortfolioSkeleton.tsx b/gitlio/components/PortfolioSkeleton.tsx
@@ -0,0 +1,34 @@
+// components/PortfolioSkeleton.tsx
+import React from 'react';
+
+const PortfolioSkeleton: React.FC = () => {
+  return (
+    <div className="flex flex-row flex-wrap">
+      {Array.from({ length: 3 }).map((_, index) => (
+        <div
+          key={index}
+          className="card w-96 shadow-xl border m-2 animate-pulse"
+        >
+          <div className="card-body">
+            <div className="skeleton h-6 w-full mb-4"></div>
+            {/* Title placeholder */}
+            <div className="skeleton h-4 w-3/4 mb-2"></div>
+            {/* Deploy status placeholder */}
+            <div className="skeleton h-4 w-full mb-2"></div>
+            {/* Date placeholder */}
+            <div className="skeleton h-4 w-full mb-4"></div>
+            {/* URL input placeholder */}
+            <div className="flex justify-between mt-2">
+              <div className="skeleton h-8 w-8 rounded-full"></div>
+              {/* Delete button placeholder */}
+              <div className="skeleton h-8 w-16"></div>
+              {/* Edit button placeholder */}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PortfolioSkeleton;