show the support section in the dashboard loader after 5 seconds

src/components/dashboard/loader.tsx

@@ -1,9 +1,10 @@
-import { ReactElement } from "react";
+import { ReactElement, useEffect, useState } 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";
+import { motion } from "framer-motion";
 
 /**
  * The loader for the dashboard pages.
@@ -11,6 +12,19 @@ import Image from "next/image";
  * @return the loader jsx
  */
 const DashboardLoader = (): ReactElement => {
+    const [showSupport, setShowSupport] = useState<boolean>(false);
+
+    /**
+     * Show the support section after
+     * 5 seconds of viewing this loader.
+     */
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setShowSupport(true);
+        }, 5000);
+        return () => clearTimeout(timer);
+    }, []);
+
     return (
         <div
             className="absolute w-screen h-screen flex flex-col justify-center items-center select-none"
@@ -31,32 +45,43 @@ const DashboardLoader = (): ReactElement => {
             </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>
+            {showSupport && <SupportSection />}
         </div>
     );
 };
+
+const SupportSection = () => (
+    <motion.div
+        className="absolute bottom-7 flex flex-col gap-1.5"
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 10 }}
+        transition={{ duration: 0.3 }}
+    >
+        <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>
+    </motion.div>
+);
+
 export default DashboardLoader;