refactor: use suspense query instead of serverdata for app widget (#1143)

* refactor: use suspense query instead of serverdata for app widget

* chore: add missing translation for loading tooltip

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

@@ -0,0 +1,24 @@
+import type { MantineColor } from "@mantine/core";
+import { Box, Tooltip } from "@mantine/core";
+
+interface PingDotProps {
+  color: MantineColor;
+  tooltip: string;
+}
+
+export const PingDot = ({ color, tooltip }: PingDotProps) => {
+  return (
+    <Box bottom="2.5cqmin" right="2.5cqmin" pos="absolute">
+      <Tooltip label={tooltip}>
+        <Box
+          bg={color}
+          style={{
+            borderRadius: "100%",
+          }}
+          w="10cqmin"
+          h="10cqmin"
+        ></Box>
+      </Tooltip>
+    </Box>
+  );
+};

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

@@ -0,0 +1,41 @@
+import { useState } from "react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { parseAppHrefWithVariablesClient } from "@homarr/common/client";
+
+import { PingDot } from "./ping-dot";
+
+interface PingIndicatorProps {
+  href: string;
+}
+
+export const PingIndicator = ({ href }: PingIndicatorProps) => {
+  const [ping] = clientApi.widget.app.ping.useSuspenseQuery(
+    {
+      url: parseAppHrefWithVariablesClient(href),
+    },
+    {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+    },
+  );
+
+  const [pingResult, setPingResult] = useState<RouterOutputs["widget"]["app"]["ping"]>(ping);
+
+  clientApi.widget.app.updatedPing.useSubscription(
+    { url: parseAppHrefWithVariablesClient(href) },
+    {
+      onData(data) {
+        setPingResult(data);
+      },
+    },
+  );
+
+  return (
+    <PingDot
+      color={"error" in pingResult || pingResult.statusCode >= 500 ? "red" : "green"}
+      tooltip={"statusCode" in pingResult ? pingResult.statusCode.toString() : pingResult.error}
+    />
+  );
+};