change up the dashboard loader

src/components/dashboard/loader.tsx

@@ -1,21 +1,62 @@
 import { ReactElement } from "react";
 import Branding from "@/components/branding";
+import { ArrowPathIcon, ChartBarSquareIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import SimpleTooltip from "@/components/simple-tooltip";
+import Image from "next/image";
 
 /**
  * The loader for the dashboard pages.
  *
  * @return the loader jsx
  */
-const DashboardLoader = (): ReactElement => (
-    <div
-        className="absolute w-screen h-screen flex flex-col gap-1.5 animate-pulse justify-center items-center"
-        style={{
-            background:
-                "linear-gradient(to top, hsla(240, 6%, 10%, 0.7), hsl(var(--background)))",
-        }}
-    >
-        <Branding />
-        <h1 className="text-2xl font-semibold opacity-75">Loading</h1>
-    </div>
-);
+const DashboardLoader = (): ReactElement => {
+    return (
+        <div
+            className="absolute w-screen h-screen flex flex-col justify-center items-center select-none"
+            style={{
+                background:
+                    "linear-gradient(to top, hsla(240, 6%, 10%, 0.7), hsl(var(--background)))",
+            }}
+        >
+            {/* Center Content */}
+            <div className="flex flex-col gap-3 animate-pulse justify-center items-center">
+                <Branding />
+                <div className="flex gap-3.5 items-center">
+                    <ArrowPathIcon className="w-7 h-7 animate-spin" />
+                    <h1 className="text-2xl font-semibold opacity-75">
+                        Loading
+                    </h1>
+                </div>
+            </div>
+
+            {/* Support */}
+            <div className="absolute bottom-7 flex flex-col gap-1.5">
+                <p className="opacity-75 pointer-events-none">
+                    Still can&apos;t connect?
+                </p>
+                <div className="flex gap-2.5 justify-center items-center">
+                    {/* Status Page */}
+                    <SimpleTooltip content="View Status Page">
+                        <Link href="https://status.pulseapp.cc">
+                            <ChartBarSquareIcon className="w-6 h-6" />
+                        </Link>
+                    </SimpleTooltip>
+
+                    {/* Discord */}
+                    <SimpleTooltip content="Join the Discord server">
+                        <Link href="https://discord.pulseapp.cc">
+                            <Image
+                                src="/media/platforms/discord.png"
+                                alt="Discord Logo"
+                                width={24}
+                                height={24}
+                            />
+                        </Link>
+                    </SimpleTooltip>
+                </div>
+            </div>
+        </div>
+    );
+};
 export default DashboardLoader;

src/components/dashboard/sidebar/organization-selector.tsx

@@ -105,7 +105,7 @@ const OrganizationSelector = (): ReactElement => {
                                 (organization: Organization, index: number) => (
                                     <CommandItem
                                         key={index}
-                                        className="flex gap-2 items-center"
+                                        className="px-3.5 relative flex gap-2 items-center"
                                         value={organization.name}
                                         onSelect={(currentValue: string) =>
                                             selectOrganization(
@@ -124,7 +124,7 @@ const OrganizationSelector = (): ReactElement => {
                                         {organization.name}
                                         {organization.snowflake ===
                                             selectedOrganization && (
-                                            <CheckIcon className="mx-auto w-4 h-4" />
+                                            <CheckIcon className="absolute right-3.5 w-4 h-4" />
                                         )}
                                     </CommandItem>
                                 )

src/components/dashboard/sidebar/user-menu.tsx

@@ -29,7 +29,7 @@ const UserMenu = (): ReactElement => {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger>
-                <div className="px-5 py-2 flex gap-3 items-center font-medium bg-background/30 border hover:opacity-75 rounded-lg transition-all transform-gpu">
+                <div className="px-5 py-2 flex gap-2.5 items-center font-medium bg-background/30 border hover:opacity-75 rounded-lg transition-all transform-gpu">
                     <UserAvatar user={user as User} size="sm" />@
                     {user?.username}
                 </div>

src/components/org/organization-logo.tsx

@@ -63,7 +63,10 @@ const OrganizationLogo = ({
                 fill
             />
         ) : (
-            <InitialsAvatar name={organization.name} />
+            <InitialsAvatar
+                className="w-6 h-5 bg-muted rounded-full"
+                name={organization.name}
+            />
         )}
     </div>
 );

src/components/user/user-avatar.tsx

@@ -63,7 +63,10 @@ const UserAvatar = ({
                 fill
             />
         ) : (
-            <InitialsAvatar name={user.username} />
+            <InitialsAvatar
+                className="w-6 h-6 bg-muted rounded-full"
+                name={user.username}
+            />
         )}
     </div>
 );