chore: improve graph responsiveness

Signed-off-by: Henry <mail@henrygressmann.de>

Author: explodingcamera

web/src/api/hooks.ts

@@ -108,7 +108,6 @@ export const useDimension = ({
 		return { data: data?.data, biggest, order, isLoading, error };
 	}, [data, isLoading, error]);
 };
-
 export const useProjectGraph = ({
 	projectId,
 	metric,
@@ -127,16 +126,19 @@ export const useProjectGraph = ({
 		staleTime = 0;
 	}
 	const dataPoints = range.getGraphDataPoints();
+	const queryKey = ["project_graph", projectId, range.cacheKey(), metric, filters, dataPoints];
 
 	const {
 		data: graph,
 		isError,
 		isLoading,
+		isFetching,
+		isPlaceholderData,
 	} = useQuery({
 		refetchInterval,
 		staleTime,
 		enabled: projectId !== undefined,
-		queryKey: ["project_graph", projectId, range.cacheKey(), metric, filters, dataPoints],
+		queryKey,
 		queryFn: () =>
 			api["/api/dashboard/project/{project_id}/graph"]
 				.post({
@@ -154,10 +156,13 @@ export const useProjectGraph = ({
 		placeholderData: (prev) => prev,
 	});
 
+	const isUpdating = isFetching && isPlaceholderData;
+
 	return {
 		graph,
 		isLoading,
 		isError,
+		isUpdating,
 	};
 };
 

web/src/components/ThemeSwitcher.astro

@@ -77,8 +77,6 @@ const { class: className, ...rest } = Astro.props;
     }
 
     button.addEventListener("click", () => {
-        console.log("click");
-
       if (theme === "dark") {
         setTheme("light");
         sun.style.display = "block";

web/src/components/dimensions/dimensions.module.css

@@ -1,5 +1,4 @@
 .card {
-  padding-bottom: 0.6rem;
   display: flex;
   flex-direction: column;
   margin-bottom: 0;

web/src/components/graph/graph.module.css

@@ -7,6 +7,41 @@
   }
 }
 
+.graphContainer {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .updatingOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    opacity: 0;
+    background-color: var(--pico-card-background-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    animation: fadeInOverlay 0.2s ease forwards 0.3s;
+
+    &[data-no-delay="true"] {
+      animation-delay: 0s;
+    }
+  }
+}
+
+@keyframes fadeInOverlay {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.7;
+  }
+}
+
 .tooltip {
   background-color: var(--pico-secondary-background);
   padding: 0.4rem 0.5rem;