From cab54733a545a7b27a66185a2afa3bcc1df47b0e Mon Sep 17 00:00:00 2001
From: olishiz <218533259+simchoohowe-oliver_mbbgrp@users.noreply.github.com>
Date: Sat, 2 Aug 2025 04:05:14 +0800
Subject: [PATCH 1/2] Add loading state and toast notifications to PingTab

- Implement toast notifications for ping status (loading, success, error)
- Add Bell icon to ping button for better UX
---
 client/src/components/PingTab.tsx | 57 +++++++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/client/src/components/PingTab.tsx b/client/src/components/PingTab.tsx
index 65469016d..115ff3c74 100644
--- a/client/src/components/PingTab.tsx
+++ b/client/src/components/PingTab.tsx
@@ -1,21 +1,64 @@
 import { TabsContent } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
+import { Bell } from "lucide-react";
+import { useState } from "react";
+import { useToast } from "@/lib/hooks/useToast";
+
+interface PingTabProps {
+  onPingClick: () => Promise<void>;
+}
+
+export default function PingTab({ onPingClick }: PingTabProps) {
+  const [isPinging, setIsPinging] = useState(false);
+  const { toast } = useToast();
+
+  const handlePingClick = async () => {
+    try {
+      setIsPinging(true);
+      
+      // Show loading toast
+      toast({
+        title: "Ping Initiated",
+        description: "Sending ping request to the server...",
+        duration: 5000, // Auto-dismiss after 5 seconds
+      });
+      
+      await onPingClick();
+      
+      // Show success toast when ping completes
+      toast({
+        title: "Ping Successful",
+        description: "Server responded to ping request",
+        variant: "default",
+        duration: 5000, // Auto-dismiss after 5 seconds
+      });
+    } catch (error) {
+      // Show error toast if ping fails
+      toast({
+        title: "Ping Failed",
+        description: error instanceof Error ? error.message : "Failed to ping server",
+        variant: "destructive",
+        duration: 5000, // Auto-dismiss after 5 seconds
+      });
+    } finally {
+      setIsPinging(false);
+    }
+  };
 
-const PingTab = ({ onPingClick }: { onPingClick: () => void }) => {
   return (
     <TabsContent value="ping">
       <div className="grid grid-cols-2 gap-4">
         <div className="col-span-2 flex justify-center items-center">
           <Button
-            onClick={onPingClick}
-            className="font-bold py-6 px-12 rounded-full"
+            onClick={handlePingClick}
+            disabled={isPinging}
+            className="flex items-center gap-2 font-bold py-6 px-12 rounded-full"
           >
-            Ping Server
+            <Bell className="h-4 w-4" />
+            {isPinging ? 'Pinging...' : 'Ping Server'}
           </Button>
         </div>
       </div>
     </TabsContent>
   );
-};
-
-export default PingTab;
+}

From bf0173ad488ab81ec2860fd3be629123779d7e2b Mon Sep 17 00:00:00 2001
From: olishiz <218533259+simchoohowe-oliver_mbbgrp@users.noreply.github.com>
Date: Mon, 4 Aug 2025 15:50:14 +0800
Subject: [PATCH 2/2] Fix build error

---
 client/src/components/PingTab.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/client/src/components/PingTab.tsx b/client/src/components/PingTab.tsx
index 115ff3c74..a411993e4 100644
--- a/client/src/components/PingTab.tsx
+++ b/client/src/components/PingTab.tsx
@@ -5,7 +5,7 @@ import { useState } from "react";
 import { useToast } from "@/lib/hooks/useToast";
 
 interface PingTabProps {
-  onPingClick: () => Promise<void>;
+  onPingClick?: () => Promise<void> | void;
 }
 
 export default function PingTab({ onPingClick }: PingTabProps) {
@@ -15,16 +15,18 @@ export default function PingTab({ onPingClick }: PingTabProps) {
   const handlePingClick = async () => {
     try {
       setIsPinging(true);
-      
+
       // Show loading toast
       toast({
         title: "Ping Initiated",
         description: "Sending ping request to the server...",
         duration: 5000, // Auto-dismiss after 5 seconds
       });
-      
-      await onPingClick();
-      
+
+      if (onPingClick) {
+        await onPingClick();
+      }
+
       // Show success toast when ping completes
       toast({
         title: "Ping Successful",
@@ -36,7 +38,8 @@ export default function PingTab({ onPingClick }: PingTabProps) {
       // Show error toast if ping fails
       toast({
         title: "Ping Failed",
-        description: error instanceof Error ? error.message : "Failed to ping server",
+        description:
+          error instanceof Error ? error.message : "Failed to ping server",
         variant: "destructive",
         duration: 5000, // Auto-dismiss after 5 seconds
       });
@@ -48,14 +51,14 @@ export default function PingTab({ onPingClick }: PingTabProps) {
   return (
     <TabsContent value="ping">
       <div className="grid grid-cols-2 gap-4">
-        <div className="col-span-2 flex justify-center items-center">
+        <div className="col-span-2 flex flex-col justify-center items-center gap-4">
           <Button
             onClick={handlePingClick}
             disabled={isPinging}
             className="flex items-center gap-2 font-bold py-6 px-12 rounded-full"
           >
             <Bell className="h-4 w-4" />
-            {isPinging ? 'Pinging...' : 'Ping Server'}
+            {isPinging ? "Pinging..." : "Ping Server"}
           </Button>
         </div>
       </div>