fix(web): do not call useSuspenseQueries conditionally

Which breaks a rule of hooks and makes ESLint complaint.

> web/src/queries/storage.ts 162:19  error  React Hook
> "useSuspenseQueries" is called conditionally. React Hooks must be called
> in the exact same order in every component render. Did you accidentally
> call a React Hook after an early return?  react-hooks/rules-of-hooks

Fixed it by depending on a previous query as explained at
https://tanstack.com/query/v5/docs/framework/react/guides/dependent-queries#usequeries-dependent-query

web/src/queries/storage.ts

@@ -153,13 +153,20 @@ const useProductParams = (options?: QueryHookOptions): ProductParams => {
  * Hook that returns the volume templates for the current product.
  */
 const useVolumeTemplates = (): Volume[] => {
+  const buildDefaultVolumeQueries = (product: ProductParams) => {
+    const queries = product.mountPoints.map((p) => defaultVolumeQuery(p));
+    queries.push(defaultVolumeQuery(""));
+    return queries;
+  };
+
   const systemDevices = useDevices("system", { suspense: true });
   const product = useProductParams();
-  if (!product) return [];
+  const results = useSuspenseQueries({
+    queries: product ? buildDefaultVolumeQueries(product) : [],
+  }) as Array<{ data: APIVolume }>;
+
+  if (results.length === 0) return [];
 
-  const queries = product.mountPoints.map((p) => defaultVolumeQuery(p));
-  queries.push(defaultVolumeQuery(""));
-  const results = useSuspenseQueries({ queries }) as Array<{ data: APIVolume }>;
   return results.map(({ data }) => buildVolume(data, systemDevices, product.mountPoints));
 };