fix(web): wrap the application in a <Suspense/> component (#1654)

* Wrap the application on a `<Suspense />` to handle a problem that was
most probably introduced in #1639.
* Add a missing entry to the changes file.

web/package/agama-web-ui.changes

@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Thu Oct  3 10:20:34 UTC 2024 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
+
+- Drop the old HTTPClient (gh#agama-project/agama#1639).
+
 -------------------------------------------------------------------
 Mon Sep 30 08:52:36 UTC 2024 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 
@@ -14,7 +19,7 @@ Fri Sep 27 13:00:05 UTC 2024 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 
 - Properly translate the storage interface when switching
   the language of the UI (gh#agama-project/agama#1629).
-  
+
 -------------------------------------------------------------------
 Mon Sep 23 09:04:56 UTC 2024 - Knut Anderssen <kanderssen@suse.com>
 

web/src/context/root.jsx

@@ -22,8 +22,9 @@
 
 // @ts-check
 
-import React from "react";
+import React, { Suspense } from "react";
 import { AuthProvider } from "./auth";
+import { Loading } from "~/components/layout";
 
 /**
  * Combines all application providers.
@@ -32,7 +33,11 @@ import { AuthProvider } from "./auth";
  * @param {React.ReactNode} [props.children] - content to display within the provider.
  */
 function RootProviders({ children }) {
-  return <AuthProvider>{children}</AuthProvider>;
+  return (
+    <Suspense fallback={<Loading />}>
+      <AuthProvider>{children}</AuthProvider>
+    </Suspense>
+  );
 }
 
 export { RootProviders };