fix(fe): make changelog non blocking resource (#3308)

* docs: use correct port in examples

* fix(fe): remove stickiness of headers

* fix(fe): make changelog non blocking resource

Author: jog1t

frontend/src/app/changelog.tsx

@@ -1,5 +1,5 @@
 import { faSparkle, Icon } from "@rivet-gg/icons";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useLocalStorage } from "usehooks-ts";
 import {
 	Avatar,
@@ -113,13 +113,27 @@ interface ChangelogProps {
 }
 
 export function Changelog({ className, children, ...props }: ChangelogProps) {
-	const { data } = useSuspenseQuery(changelogQueryOptions());
+	const { data, isLoading, isError } = useQuery(changelogQueryOptions());
 
 	const [lastChangelog, setLast] = useLocalStorage<string | null>(
 		"rivet-lastchangelog",
 		null,
 	);
 
+	if (isLoading || isError || !data || data.length === 0) {
+		return (
+			<Slot
+				{...props}
+				className={cn(
+					"relative [&_[data-changelog-ping]]:hidden",
+					className,
+				)}
+			>
+				{children}
+			</Slot>
+		);
+	}
+
 	const hasNewChangelog = !lastChangelog
 		? data.length > 0
 		: data.some(