feat(profile-modal): Improvements - Show quality profile type in status page - Increase modal size, split things into columns - Filter formats - Bigger description size

frontend/src/components/format/FormatPage.jsx

@@ -1,10 +1,11 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import FormatCard from "./FormatCard";
 import FormatModal from "./FormatModal";
 import AddNewCard from "../ui/AddNewCard";
 import { getFormats } from "../../api/api";
 import FilterMenu from "../ui/FilterMenu";
 import SortMenu from "../ui/SortMenu";
+import { Loader } from "lucide-react";
 
 function FormatPage() {
   const [formats, setFormats] = useState([]);
@@ -15,6 +16,15 @@ function FormatPage() {
   const [filterValue, setFilterValue] = useState("");
   const [allTags, setAllTags] = useState([]);
   const [isCloning, setIsCloning] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const loadingMessages = [
+    "Decoding the custom format matrix...",
+    "Parsing the digital alphabet soup...",
+    "Untangling the format spaghetti...",
+    "Calibrating the format-o-meter...",
+    "Indexing your media DNA...",
+  ];
 
   useEffect(() => {
     fetchFormats();
@@ -30,6 +40,8 @@ function FormatPage() {
       setAllTags(tags);
     } catch (error) {
       console.error("Error fetching formats:", error);
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -86,6 +98,17 @@ function FormatPage() {
       return 0;
     });
 
+  if (isLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen">
+        <Loader size={48} className="animate-spin text-blue-500 mb-4" />
+        <p className="text-lg font-medium text-gray-700 dark:text-gray-300">
+          {loadingMessages[Math.floor(Math.random() * loadingMessages.length)]}
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div>
       <h2 className="text-2xl font-bold mb-4">Manage Custom Formats</h2>