diff --git a/web/package/agama-web-ui.changes b/web/package/agama-web-ui.changes
index 2b3de5b9e8..e24a93e7fb 100644
--- a/web/package/agama-web-ui.changes
+++ b/web/package/agama-web-ui.changes
@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Fri Jul 26 11:42:05 UTC 2024 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
+
+- Allow reloading the page during installation
+  (gh#openSUSE/agama#1503).
+
 -------------------------------------------------------------------
 Mon Jul 22 15:28:42 UTC 2024 - Josef Reidinger <jreidinger@suse.com>
 
diff --git a/web/src/MainLayout.jsx b/web/src/MainLayout.jsx
index d85734d3d0..d1ad6be238 100644
--- a/web/src/MainLayout.jsx
+++ b/web/src/MainLayout.jsx
@@ -47,7 +47,7 @@ import { rootRoutes } from "~/router";
 import { useProduct } from "./queries/software";
 
 const Header = () => {
-  const { selectedProduct } = useProduct();
+  const { selectedProduct } = useProduct({ suspense: true });
   // NOTE: Agama is a name, do not translate
   const title = selectedProduct?.name || _("Agama");
 
@@ -84,7 +84,7 @@ const Header = () => {
 
 const ChangeProductButton = () => {
   const navigate = useNavigate();
-  const { products } = useProduct();
+  const { products } = useProduct({ suspense: true });
 
   if (!products.length) return null;
 
diff --git a/web/src/components/product/ProductSelectionPage.jsx b/web/src/components/product/ProductSelectionPage.jsx
index bd5f2a8403..8bfcbcec58 100644
--- a/web/src/components/product/ProductSelectionPage.jsx
+++ b/web/src/components/product/ProductSelectionPage.jsx
@@ -33,7 +33,7 @@ const Label = ({ children }) => (
 );
 
 function ProductSelectionPage() {
-  const { products, selectedProduct } = useProduct();
+  const { products, selectedProduct } = useProduct({ suspense: true });
   const setConfig = useConfigMutation();
   const [nextProduct, setNextProduct] = useState(selectedProduct);
   const [isLoading, setIsLoading] = useState(false);
diff --git a/web/src/components/product/ProductSelectionProgress.jsx b/web/src/components/product/ProductSelectionProgress.jsx
index 944ebe3243..9e7abdd99e 100644
--- a/web/src/components/product/ProductSelectionProgress.jsx
+++ b/web/src/components/product/ProductSelectionProgress.jsx
@@ -33,7 +33,7 @@ import { useInstallerClient } from "~/context/installer";
  * Shows progress steps when a product is selected.
  */
 function ProductSelectionProgress() {
-  const { selectedProduct } = useProduct();
+  const { selectedProduct } = useProduct({ suspense: true });
   const { manager } = useInstallerClient();
   const [status, setStatus] = useState();
 
diff --git a/web/src/components/storage/ProposalTransactionalInfo.jsx b/web/src/components/storage/ProposalTransactionalInfo.jsx
index 1221ad6374..9127aec430 100644
--- a/web/src/components/storage/ProposalTransactionalInfo.jsx
+++ b/web/src/components/storage/ProposalTransactionalInfo.jsx
@@ -38,7 +38,7 @@ import { isTransactionalSystem } from "~/components/storage/utils";
  * @param {ProposalSettings} props.settings - Settings used for calculating a proposal.
  */
 export default function ProposalTransactionalInfo({ settings }) {
-  const { selectedProduct } = useProduct();
+  const { selectedProduct } = useProduct({ suspense: true });
 
   if (!isTransactionalSystem(settings?.volumes)) return;
 
diff --git a/web/src/queries/software.ts b/web/src/queries/software.ts
index 9c29d8c73f..9834bf8ec9 100644
--- a/web/src/queries/software.ts
+++ b/web/src/queries/software.ts
@@ -22,6 +22,7 @@
 import React from "react";
 import {
   useMutation,
+  useQueries,
   useQueryClient,
   useSuspenseQueries,
   useSuspenseQuery,
@@ -116,11 +117,21 @@ const useConfigMutation = () => {
 /**
  * Returns available products and selected one, if any
  */
-const useProduct = (): { products: Product[]; selectedProduct: Product | undefined } => {
-  const [{ data: selected }, { data: products }] = useSuspenseQueries({
+const useProduct = (
+  options?: QueryHookOptions,
+): { products?: Product[]; selectedProduct?: Product } => {
+  const func = options?.suspense ? useSuspenseQueries : useQueries;
+  const [
+    { data: selected, isPending: isSelectedPending },
+    { data: products, isPending: isProductsPending },
+  ] = func({
     queries: [selectedProductQuery(), productsQuery()],
   });
 
+  if (isSelectedPending || isProductsPending) {
+    return {};
+  }
+
   const selectedProduct = products.find((p: Product) => p.id === selected);
   return {
     products,
diff --git a/web/src/types/queries.ts b/web/src/types/queries.ts
new file mode 100644
index 0000000000..f1aed1b1ad
--- /dev/null
+++ b/web/src/types/queries.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) [2024] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+/**
+ * Typical options for our queries hooks.
+ */
+type QueryHookOptions = {
+  suspense?: boolean;
+};