feat(ping): ignore certificate error and show request duration (#3546)

packages/widgets/src/app/component.tsx

@@ -1,25 +1,20 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { Suspense } from "react";
 import { Flex, Text, Tooltip, UnstyledButton } from "@mantine/core";
-import { IconLoader } from "@tabler/icons-react";
 import combineClasses from "clsx";
 
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useSettings } from "@homarr/settings";
 import { useRegisterSpotlightContextResults } from "@homarr/spotlight";
-import { useI18n } from "@homarr/translation/client";
 import { MaskedOrNormalImage } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
 import classes from "./app.module.css";
-import { PingDot } from "./ping/ping-dot";
 import { PingIndicator } from "./ping/ping-indicator";
 
 export default function AppWidget({ options, isEditMode, height, width }: WidgetComponentProps<"app">) {
-  const t = useI18n();
   const settings = useSettings();
   const board = useRequiredBoard();
   const [app] = clientApi.app.byId.useSuspenseQuery(
@@ -97,9 +92,7 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
         </Flex>
       </Tooltip.Floating>
       {options.pingEnabled && !settings.forceDisableStatus && !board.disableStatus && app.href ? (
-        <Suspense fallback={<PingDot icon={IconLoader} color="blue" tooltip={`${t("common.action.loading")}…`} />}>
-          <PingIndicator href={app.pingUrl ?? app.href} />
-        </Suspense>
+        <PingIndicator href={app.pingUrl ?? app.href} />
       ) : null}
     </AppLink>
   );

packages/widgets/src/app/ping/ping-indicator.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
-import { IconCheck, IconX } from "@tabler/icons-react";
+import { IconCheck, IconLoader, IconX } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
+import { useI18n } from "@homarr/translation/client";
 
 import { PingDot } from "./ping-dot";
 
@@ -11,17 +12,8 @@ interface PingIndicatorProps {
 }
 
 export const PingIndicator = ({ href }: PingIndicatorProps) => {
-  const [ping] = clientApi.widget.app.ping.useSuspenseQuery(
-    {
-      url: href,
-    },
-    {
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-    },
-  );
-
-  const [pingResult, setPingResult] = useState<RouterOutputs["widget"]["app"]["ping"]>(ping);
+  const t = useI18n();
+  const [pingResult, setPingResult] = useState<RouterOutputs["widget"]["app"]["updatedPing"] | null>(null);
 
   clientApi.widget.app.updatedPing.useSubscription(
     { url: href },
@@ -32,13 +24,21 @@ export const PingIndicator = ({ href }: PingIndicatorProps) => {
     },
   );
 
+  if (!pingResult) {
+    return <PingDot icon={IconLoader} color="blue" tooltip={`${t("common.action.loading")}…`} />;
+  }
+
   const isError = "error" in pingResult || pingResult.statusCode >= 500;
 
   return (
     <PingDot
       icon={isError ? IconX : IconCheck}
       color={isError ? "red" : "green"}
-      tooltip={"statusCode" in pingResult ? pingResult.statusCode.toString() : pingResult.error}
+      tooltip={
+        "statusCode" in pingResult
+          ? `${pingResult.statusCode} - ${pingResult.durationMs.toFixed(0)}ms`
+          : pingResult.error
+      }
     />
   );
 };