refactor(web): replace loaders with queries hooks

web/src/App.jsx

@@ -29,11 +29,8 @@ import { useInstallerClientStatus } from "~/context/installer";
 import { useProduct } from "./context/product";
 import { CONFIG, INSTALL, STARTUP } from "~/client/phase";
 import { BUSY } from "~/client/status";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useL10nConfigChanges } from "~/queries/l10n";
 
-const queryClient = new QueryClient();
-
 /**
  * Main application component.
  *

web/src/MainLayout.jsx

@@ -19,7 +19,7 @@
  * find current contact information at www.suse.com.
  */
 
-import React from "react";
+import React, { Suspense } from "react";
 import { Outlet, NavLink, useNavigate } from "react-router-dom";
 import {
   Button,
@@ -28,7 +28,7 @@ import {
   Page, PageSidebar, PageSidebarBody, PageToggleButton,
   Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem
 } from "@patternfly/react-core";
-import { Icon } from "~/components/layout";
+import { Icon, Loading } from "~/components/layout";
 import { About, InstallerOptions, LogsButton } from "~/components/core";
 import { _ } from "~/i18n";
 import { rootRoutes } from "~/router";
@@ -134,7 +134,9 @@ export default function Root() {
       header={<Header />}
       sidebar={<Sidebar />}
     >
-      <Outlet />
+      <Suspense fallback={<Loading />}>
+        <Outlet />
+      </Suspense>
     </Page>
   );
 }

web/src/components/l10n/KeyboardSelection.jsx

@@ -21,18 +21,18 @@
 
 import React, { useState } from "react";
 import { Form, FormGroup, Radio, Text } from "@patternfly/react-core";
-import { useLoaderData, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { ListSearch, Page } from "~/components/core";
 import { _ } from "~/i18n";
-import { useConfigMutation } from "~/queries/l10n";
+import { useConfigMutation, useL10n } from "~/queries/l10n";
 import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
 
 // TODO: Add documentation and typechecking
 // TODO: Evaluate if worth it extracting the selector
 export default function KeyboardSelection() {
   const navigate = useNavigate();
   const setConfig = useConfigMutation();
-  const { keymaps, keymap: currentKeymap } = useLoaderData();
+  const { keymaps, selectedKeymap: currentKeymap } = useL10n();
   const [selected, setSelected] = useState(currentKeymap.id);
   const [filteredKeymaps, setFilteredKeymaps] = useState(
     keymaps.sort((k1, k2) => k1.name > k2.name ? 1 : -1)

web/src/components/l10n/KeyboardSelection.test.jsx

@@ -36,13 +36,13 @@ const mockConfigMutation = {
 
 jest.mock("~/queries/l10n", () => ({
   ...jest.requireActual("~/queries/l10n"),
-  useConfigMutation: () => mockConfigMutation
+  useConfigMutation: () => mockConfigMutation,
+  useL10n: () => ({ keymaps, selectedKeymap: keymaps[0] })
 }));
 
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
   useNavigate: () => mockNavigateFn,
-  useLoaderData: () => ({ keymaps, keymap: keymaps[0] })
 }));
 
 it("allows changing the keyboard", async () => {

web/src/components/l10n/L10nPage.jsx

@@ -25,6 +25,7 @@ import { useLoaderData } from "react-router-dom";
 import { ButtonLink, CardField, Page } from "~/components/core";
 import { LOCALE_SELECTION_PATH, KEYMAP_SELECTION_PATH, TIMEZONE_SELECTION_PATH } from "~/routes/l10n";
 import { _ } from "~/i18n";
+import { useL10n } from "~/queries/l10n";
 
 const Section = ({ label, value, children }) => {
   return (
@@ -45,7 +46,11 @@ const Section = ({ label, value, children }) => {
  * @component
  */
 export default function L10nPage() {
-  const { locale, timezone, keymap } = useLoaderData();
+  const {
+    selectedLocale: locale,
+    selectedTimezone: timezone,
+    selectedKeymap: keymap
+  } = useL10n();
 
   return (
     <>

web/src/components/l10n/L10nPage.test.jsx

@@ -25,18 +25,39 @@ import L10nPage from "~/components/l10n/L10nPage";
 
 let mockLoadedData;
 
+const locales = [
+  { id: "en_US.UTF-8", name: "English", territory: "United States" },
+  { id: "es_ES.UTF-8", name: "Spanish", territory: "Spain" }
+];
+
+const keymaps = [
+  { id: "us", name: "English" },
+  { id: "es", name: "Spanish" }
+];
+
+const timezones = [
+  { id: "Europe/Berlin", parts: ["Europe", "Berlin"] },
+  { id: "Europe/Madrid", parts: ["Europe", "Madrid"] }
+];
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual("react-router-dom"),
-  useLoaderData: () => mockLoadedData,
   // TODO: mock the link because it needs a working router.
   Link: ({ children }) => <button>{children}</button>
 }));
 
+jest.mock("~/queries/l10n", () => ({
+  useL10n: () => mockLoadedData
+}));
+
 beforeEach(() => {
   mockLoadedData = {
-    locale:   { id: "en_US.UTF-8", name: "English", territory: "United States" },
-    keymap:   { id: "us", name: "English" },
-    timezone: { id: "Europe/Berlin", parts: ["Europe", "Berlin"] }
+    locales,
+    keymaps,
+    timezones,
+    selectedLocale: locales[0],
+    selectedKeymap: keymaps[0],
+    selectedTimezone: timezones[0],
   };
 });
 
@@ -49,7 +70,7 @@ it("renders a section for configuring the language", () => {
 
 describe("if there is no selected language", () => {
   beforeEach(() => {
-    mockLoadedData.locale = undefined;
+    mockLoadedData.selectedLocale = undefined;
   });
 
   it("renders a button for selecting a language", () => {
@@ -69,7 +90,7 @@ it("renders a section for configuring the keyboard", () => {
 
 describe("if there is no selected keyboard", () => {
   beforeEach(() => {
-    mockLoadedData.keymap = undefined;
+    mockLoadedData.selectedKeymap = undefined;
   });
 
   it("renders a button for selecting a keyboard", () => {
@@ -89,7 +110,7 @@ it("renders a section for configuring the time zone", () => {
 
 describe("if there is no selected time zone", () => {
   beforeEach(() => {
-    mockLoadedData.timezone = undefined;
+    mockLoadedData.selectedTimezone = undefined;
   });
 
   it("renders a button for selecting a time zone", () => {

web/src/components/l10n/LocaleSelection.jsx

@@ -21,18 +21,18 @@
 
 import React, { useState } from "react";
 import { Flex, Form, FormGroup, Radio } from "@patternfly/react-core";
-import { useLoaderData, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { ListSearch, Page } from "~/components/core";
 import { _ } from "~/i18n";
-import { useConfigMutation } from "~/queries/l10n";
+import { useConfigMutation, useL10n } from "~/queries/l10n";
 import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
 
 // TODO: Add documentation and typechecking
 // TODO: Evaluate if worth it extracting the selector
 export default function LocaleSelection() {
   const navigate = useNavigate();
   const setConfig = useConfigMutation();
-  const { locales, locale: currentLocale } = useLoaderData();
+  const { locales, selectedLocale: currentLocale } = useL10n();
   const [selected, setSelected] = useState(currentLocale.id);
   const [filteredLocales, setFilteredLocales] = useState(locales);
 

web/src/components/l10n/LocaleSelection.test.jsx

@@ -36,13 +36,13 @@ const mockConfigMutation = {
 
 jest.mock("~/queries/l10n", () => ({
   ...jest.requireActual("~/queries/l10n"),
+  useL10n: () => ({ locales, selectedLocale: locales[0] }),
   useConfigMutation: () => mockConfigMutation
 }));
 
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
-  useNavigate: () => mockNavigateFn,
-  useLoaderData: () => ({ locales, locale: locales[0] })
+  useNavigate: () => mockNavigateFn
 }));
 
 it("allows changing the keyboard", async () => {

web/src/components/l10n/TimezoneSelection.jsx

@@ -21,11 +21,11 @@
 
 import React, { useState } from "react";
 import { Divider, Flex, Form, FormGroup, Radio, Text } from "@patternfly/react-core";
-import { useLoaderData, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { ListSearch, Page } from "~/components/core";
 import { _ } from "~/i18n";
 import { timezoneTime } from "~/utils";
-import { useConfigMutation } from "~/queries/l10n";
+import { useConfigMutation, useL10n } from "~/queries/l10n";
 import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
 
 let date;
@@ -56,7 +56,7 @@ export default function TimezoneSelection() {
   date = new Date();
   const navigate = useNavigate();
   const setConfig = useConfigMutation();
-  const { timezones, timezone: currentTimezone } = useLoaderData();
+  const { timezones, selectedTimezone: currentTimezone } = useL10n();
   const displayTimezones = timezones.map(timezoneWithDetails);
   const [selected, setSelected] = useState(currentTimezone.id);
   const [filteredTimezones, setFilteredTimezones] = useState(sortedTimezones(displayTimezones));

web/src/components/l10n/TimezoneSelection.test.jsx

@@ -36,13 +36,13 @@ const mockConfigMutation = {
 
 jest.mock("~/queries/l10n", () => ({
   ...jest.requireActual("~/queries/l10n"),
-  useConfigMutation: () => mockConfigMutation
+  useConfigMutation: () => mockConfigMutation,
+  useL10n: () => ({ timezones, selectedTimezone: timezones[0] })
 }));
 
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
-  useNavigate: () => mockNavigateFn,
-  useLoaderData: () => ({ timezones, timezone: timezones[0] })
+  useNavigate: () => mockNavigateFn
 }));
 
 it("allows changing the keyboard", async () => {

web/src/components/overview/L10nSection.jsx

@@ -23,16 +23,10 @@ import React from "react";
 import { TextContent, Text, TextVariants } from "@patternfly/react-core";
 import { Em } from "~/components/core";
 import { _ } from "~/i18n";
-import { localesQuery, configQuery } from "~/queries/l10n";
-import { useQuery } from "@tanstack/react-query";
+import { useL10n } from "~/queries/l10n";
 
 export default function L10nSection() {
-  const { isPending: isLocalesPending, data: locales } = useQuery(localesQuery());
-  const { isPending: isConfigPending, data: config } = useQuery(configQuery());
-
-  if (isLocalesPending || isConfigPending) return;
-
-  const locale = locales.find((l) => l.id === config?.locales[0]);
+  const { selectedLocale: locale } = useL10n();
 
   // TRANSLATORS: %s will be replaced by a language name and territory, example:
   // "English (United States)".

web/src/components/overview/L10nSection.test.jsx

@@ -30,14 +30,7 @@ const locales = [
 ];
 
 jest.mock("~/queries/l10n", () => ({
-  localesQuery: () => ({
-    queryKey: ["l10n", "locales"],
-    queryFn: jest.fn().mockResolvedValue(locales)
-  }),
-  configQuery: () => ({
-    queryKey: ["l10n", "config"],
-    queryFn: jest.fn().mockResolvedValue({ locales: ["en_US.UTF-8"] })
-  })
+  useL10n: () => ({ locales, selectedLocale: locales[0] }),
 }));
 
 it("displays the selected locale", async () => {

web/src/context/app.jsx

@@ -52,4 +52,4 @@ function AppProviders({ children }) {
   );
 }
 
-export { AppProviders, queryClient };
+export { AppProviders };