Render an earlier loading screen fallback

Author: sandhose

frontend/src/components/Layout/Layout.tsx

@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Please see LICENSE in the repository root for full details.
 
-import { queryOptions, useQuery } from "@tanstack/react-query";
+import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 import cx from "classnames";
 import { Suspense } from "react";
 import { graphql } from "../../gql";
@@ -28,7 +28,7 @@ export const query = queryOptions({
 });
 
 const AsyncFooter: React.FC = () => {
-  const result = useQuery(query);
+  const result = useSuspenseQuery(query);
 
   if (result.error || result.isPending) {
     // We probably prefer to render an empty footer in case of an error

frontend/src/router.tsx

@@ -5,6 +5,7 @@
 // Please see LICENSE in the repository root for full details.
 
 import { createRouter } from "@tanstack/react-router";
+import LoadingScreen from "./components/LoadingScreen";
 import config from "./config";
 import { queryClient } from "./graphql";
 import { routeTree } from "./routeTree.gen";
@@ -13,6 +14,7 @@ import { routeTree } from "./routeTree.gen";
 export const router = createRouter({
   routeTree,
   basepath: config.root,
+  defaultPendingComponent: LoadingScreen,
   defaultPreload: "intent",
   context: { queryClient },
 });