feat: add LoadingSnipper component and integrate into pages

- Created reusable LoadingSnipper component in src/components

- Updated TemplatesPage, EditorPage, and SnippetsPage to use the new spinner

- Improved loading state consistency across the app

Author: sabbirhosen44

src/components/LoadingSnipper.tsx

@@ -0,0 +1,14 @@
+import { FiLoader } from "react-icons/fi";
+
+const LoadingSnipper = ({ children }: React.PropsWithChildren) => {
+  return (
+    <div className="flex justify-center items-center h-screen">
+      <div className="text-center">
+        <FiLoader className="size-8 animate-spin mx-auto" />
+        <p className="text-lg">{children}</p>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingSnipper;

src/pages/TemplatesPage.tsx

@@ -1,4 +1,4 @@
-import { AlertDialogHeader } from "@/components/ui/alert-dialog";
+import LoadingSnipper from "@/components/LoadingSnipper";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -197,9 +197,7 @@ const TemplatesPage = () => {
       </div>
 
       {isLoading ? (
-        <div className="text-center py-12">
-          <p className="text-muted-foreground">Loading templates...</p>
-        </div>
+        <LoadingSnipper>{"Loading Templates..."}</LoadingSnipper>
       ) : templates.length > 0 ? (
         <>
           <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">

src/pages/editor/EditorPage.tsx

@@ -66,6 +66,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import OutputConsole from "../../components/editor/OutputConsole";
 import { createSnippet } from "@/store/slices/snippetSlice";
+import LoadingSnipper from "@/components/LoadingSnipper";
 
 const EditorPage = () => {
   const navigate = useNavigate();
@@ -367,15 +368,12 @@ const EditorPage = () => {
     }
   };
 
-  if (authLoading || (projectLoading && !currentProject)) {
-    return (
-      <div className="flex items-center justify-center h-screen">
-        <div className="text-center">
-          <FiLoader className="size-8 animate-spin mx-auto mb-4" />
-          <p className="text-lg">Loading project...</p>
-        </div>
-      </div>
-    );
+  if (authLoading) {
+    return <LoadingSnipper>{"Loading Project..."}</LoadingSnipper>;
+  }
+
+  if (projectLoading && !currentProject) {
+    return <LoadingSnipper>{"Loading Project..."}</LoadingSnipper>;
   }
 
   if (projectError) {

src/pages/snippets/SnippetsPage.tsx

@@ -1,3 +1,4 @@
+import LoadingSnipper from "@/components/LoadingSnipper";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -27,6 +28,7 @@ import { FaCode, FaFileCode } from "react-icons/fa";
 import { FiMessageSquare } from "react-icons/fi";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
+import { supportedLanguages } from "@/constants";
 
 const SnippetsPage = () => {
   const { snippets, isLoading, error, totalPages, currentPage } = useSelector(
@@ -82,6 +84,7 @@ const SnippetsPage = () => {
             placeholder="Search Templates..."
           />
         </div>
+
         <div className="flex flex-col sm:flex-row gap-2">
           <Select
             value={languageFilter || "all"}
@@ -94,15 +97,12 @@ const SnippetsPage = () => {
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>
-                <SelectItem value="all">All Language</SelectItem>
-                <SelectItem value="Javascript">Javascript</SelectItem>
-                <SelectItem value="Python">Python</SelectItem>
-                <SelectItem value="C++">C++</SelectItem>
-                <SelectItem value="Typescript">Typescript</SelectItem>
-                <SelectItem value="Java">Java</SelectItem>
-                <SelectItem value="SQL">SQL</SelectItem>
-                <SelectItem value="PHP">PHP</SelectItem>
-                <SelectItem value="CSS">CSS</SelectItem>
+                <SelectItem value="all">All Languages</SelectItem>
+                {supportedLanguages.map((language) => (
+                  <SelectItem key={language} value={language}>
+                    {language}
+                  </SelectItem>
+                ))}
               </SelectGroup>
             </SelectContent>
           </Select>
@@ -140,7 +140,9 @@ const SnippetsPage = () => {
         </div>
       </div>
 
-      {snippets.length > 0 ? (
+      {isLoading ? (
+        <LoadingSnipper>{"Loading Snippet..."}</LoadingSnipper>
+      ) : snippets.length > 0 ? (
         <div className="grid gap-6 md:grid-cols-2 ">
           {snippets.map((snippet) => (
             <Card key={snippet._id} className="overflow-hidden">