feat: skeleton for apps.

fezcode · fezcode · commit 3493e980ed70 · 2025-11-13T23:40:52.000+03:00
diff --git a/src/pages/AppPage.js b/src/pages/AppPage.js
@@ -22,8 +22,10 @@ function AppPage() {
 
   const [groupedApps, setGroupedApps] = useState({});
   const [collapsedCategories, setCollapsedCategories] = useState({});
+  const [isLoading, setIsLoading] = useState(true); // New loading state
 
   useEffect(() => {
+    setIsLoading(true); // Set loading to true when fetch starts
     fetch('/apps/apps.json')
       .then((response) => response.json())
       .then((data) => {
@@ -34,7 +36,10 @@ function AppPage() {
         }, {});
         setCollapsedCategories(initialCollapsedState);
       })
-      .catch((error) => console.error('Error fetching apps:', error));
+      .catch((error) => console.error('Error fetching apps:', error))
+      .finally(() => {
+        setIsLoading(false); // Set loading to false when fetch completes
+      });
   }, []);
 
   const toggleCategoryCollapse = (categoryKey) => {
@@ -64,44 +69,65 @@ function AppPage() {
           <span className="apps-color">apps</span>
         </h1>
         <hr className="border-gray-700" />
-        {Object.keys(groupedApps)
-          .sort((a, b) => groupedApps[a].order - groupedApps[b].order)
-          .map(categoryKey => {
-            const category = groupedApps[categoryKey];
-            const CategoryIcon = appIcons[category.icon];
-            return (
-              <div key={categoryKey} className="mt-8">
-                <h2
-                  className="text-3xl font-arvo font-normal tracking-tight text-gray-200 mb-2 flex items-center cursor-pointer"
-                  onClick={() => toggleCategoryCollapse(categoryKey)}
-                >
-                  {collapsedCategories[categoryKey] ? <CaretRight size={24} className="mr-2" /> : <CaretDown size={24} className="mr-2" />}
-                  {CategoryIcon && <CategoryIcon size={28} className="mr-2" />}
-                  {category.name} ({category.apps.length})
-                </h2>
-                <p className="text-gray-400 mb-4 ml-10">{category.description}</p>
-                <AnimatePresence initial={false}>
-                  {!collapsedCategories[categoryKey] && (
-                    <motion.div
-                      key="content"
-                      initial="collapsed"
-                      animate="open"
-                      exit="collapsed"
-                      variants={variants}
-                      transition={{ duration: 0.3, ease: "easeInOut" }}
-                      style={{ overflow: "hidden" }}
-                    >
-                      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                        {category.apps.map((app, index) => (
-                          <AppCard key={index} app={app} />
-                        ))}
-                      </div>
-                    </motion.div>
-                  )}
-                </AnimatePresence>
+        {isLoading ? (
+          // Skeleton Loading State
+          <div className="mt-8">
+            {[...Array(3)].map((_, categoryIndex) => ( // Simulate 3 categories
+              <div key={categoryIndex} className="mb-8">
+                <div className="h-8 bg-gray-700 rounded w-1/3 mb-4 animate-pulse"></div> {/* Category Title */}
+                <div className="h-4 bg-gray-800 rounded w-1/2 mb-6 animate-pulse"></div> {/* Category Description */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                  {[...Array(3)].map((_, appIndex) => ( // Simulate 3 app cards per category
+                    <div key={appIndex} className="bg-gray-800 rounded-lg shadow-lg p-6 h-40 animate-pulse">
+                      <div className="h-6 bg-gray-700 rounded w-3/4 mb-2"></div>
+                      <div className="h-4 bg-gray-700 rounded w-1/2"></div>
+                    </div>
+                  ))}
+                </div>
               </div>
-            );
-          })}
+            ))}
+          </div>
+        ) : (
+          // Actual Content
+          Object.keys(groupedApps)
+            .sort((a, b) => groupedApps[a].order - groupedApps[b].order)
+            .map(categoryKey => {
+              const category = groupedApps[categoryKey];
+              const CategoryIcon = appIcons[category.icon];
+              return (
+                <div key={categoryKey} className="mt-8">
+                  <h2
+                    className="text-3xl font-arvo font-normal tracking-tight text-gray-200 mb-2 flex items-center cursor-pointer"
+                    onClick={() => toggleCategoryCollapse(categoryKey)}
+                  >
+                    {collapsedCategories[categoryKey] ? <CaretRight size={24} className="mr-2" /> : <CaretDown size={24} className="mr-2" />}
+                    {CategoryIcon && <CategoryIcon size={28} className="mr-2" />}
+                    {category.name} ({category.apps.length})
+                  </h2>
+                  <p className="text-gray-400 mb-4 ml-10">{category.description}</p>
+                  <AnimatePresence initial={false}>
+                    {!collapsedCategories[categoryKey] && (
+                      <motion.div
+                        key="content"
+                        initial="collapsed"
+                        animate="open"
+                        exit="collapsed"
+                        variants={variants}
+                        transition={{ duration: 0.3, ease: "easeInOut" }}
+                        style={{ overflow: "hidden" }}
+                      >
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                          {category.apps.map((app, index) => (
+                            <AppCard key={index} app={app} />
+                          ))}
+                        </div>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              );
+            })
+        )}
       </div>
     </div>
   );
