revert: "feat(ping): ignore certificate error and show request durati… (#3680)

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/widgets/src/app/component.tsx

@@ -1,20 +1,25 @@
 "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(
@@ -92,7 +97,9 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
         </Flex>
       </Tooltip.Floating>
       {options.pingEnabled && !settings.forceDisableStatus && !board.disableStatus && app.href ? (
-        <PingIndicator href={app.pingUrl ?? app.href} />
+        <Suspense fallback={<PingDot icon={IconLoader} color="blue" tooltip={`${t("common.action.loading")}…`} />}>
+          <PingIndicator href={app.pingUrl ?? app.href} />
+        </Suspense>
       ) : null}
     </AppLink>
   );

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

@@ -1,9 +1,8 @@
 import { useState } from "react";
-import { IconCheck, IconLoader, IconX } from "@tabler/icons-react";
+import { IconCheck, 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";
 
@@ -12,8 +11,17 @@ interface PingIndicatorProps {
 }
 
 export const PingIndicator = ({ href }: PingIndicatorProps) => {
-  const t = useI18n();
-  const [pingResult, setPingResult] = useState<RouterOutputs["widget"]["app"]["updatedPing"] | null>(null);
+  const [ping] = clientApi.widget.app.ping.useSuspenseQuery(
+    {
+      url: href,
+    },
+    {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+    },
+  );
+
+  const [pingResult, setPingResult] = useState<RouterOutputs["widget"]["app"]["ping"]>(ping);
 
   clientApi.widget.app.updatedPing.useSubscription(
     { url: href },
@@ -24,10 +32,6 @@ 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 (