Storage: show skeletons only when needed

web/src/components/core/Popup.jsx

@@ -25,6 +25,7 @@ import React from "react";
 import { Button, Modal } from "@patternfly/react-core";
 import { _ } from "~/i18n";
 import { partition } from "~/utils";
+import { Loading } from "~/components/layout";
 
 /**
  * @typedef {import("@patternfly/react-core").ModalProps} ModalProps
@@ -190,12 +191,14 @@ const AncillaryAction = ({ children, ...actionsProps }) => (
  * @typedef {object} PopupBaseProps
  * @property {"auto" | "small" | "medium" | "large"} [blockSize="auto"] - The block/height size for the dialog. Default is "auto".
  * @property {"auto" | "small" | "medium" | "large"} [inlineSize="medium"] - The inline/width size for the dialog. Default is "medium".
+ * @property {boolean} [isLoading=false] - Whether the data is loading, if yes it displays a loading indicator instead of the requested content
  * @typedef {Omit<ModalProps, "variant" | "size"> & PopupBaseProps} PopupProps
  *
  * @param {PopupProps} props
  */
 const Popup = ({
   isOpen = false,
+  isLoading = false,
   showClose = false,
   inlineSize = "medium",
   blockSize = "auto",
@@ -214,7 +217,7 @@ const Popup = ({
       actions={actions}
       className={`${className} block-size-${blockSize} inline-size-${inlineSize}`.trim()}
     >
-      {content}
+      {isLoading ? <Loading text={_("Loading data...")} /> : content}
     </Modal>
   );
 };

web/src/components/storage/BootConfigField.jsx

@@ -87,8 +87,8 @@ export default function BootConfigField({
     onChange({ configureBoot, bootDevice });
   };
 
-  if (isLoading) {
-    return <Skeleton screenreaderText={_("Waiting for information about boot config")} width="75%" />;
+  if (isLoading && configureBoot === undefined) {
+    return <Skeleton width="75%" />;
   }
 
   let value;

web/src/components/storage/DeviceSelectionDialog.jsx

@@ -52,6 +52,7 @@ const OPTIONS_NAME = "selection-mode";
  * @param {StorageDevice[]} props.targetPVDevices
  * @param {StorageDevice[]} props.devices - The actions to perform in the system.
  * @param {boolean} [props.isOpen=false] - Whether the dialog is visible or not.
+ * @param {boolean} [props.isLoading=false] - Whether loading the data is in progress
  * @param {() => void} [props.onCancel=noop]
  * @param {(target: Target) => void} [props.onAccept=noop]
  *
@@ -67,6 +68,7 @@ export default function DeviceSelectionDialog({
   targetPVDevices: defaultPVDevices,
   devices,
   isOpen,
+  isLoading,
   onCancel = noop,
   onAccept = noop,
   ...props
@@ -95,6 +97,11 @@ export default function DeviceSelectionDialog({
     return true;
   };
 
+  // change the initial `undefined` state when receiving the real data
+  if (!target && defaultTarget) { setTarget(defaultTarget) }
+  if (!targetDevice && defaultTargetDevice) { setTargetDevice(defaultTargetDevice) }
+  if (!targetPVDevices && defaultPVDevices) { setTargetPVDevices(defaultPVDevices) }
+
   const isDeviceSelectable = (device) => device.isDrive || device.type === "md";
 
   // TRANSLATORS: description for using plain partitions for installing the
@@ -114,6 +121,7 @@ devices.").split(/[[\]]/);
     <Popup
       title={_("Device for installing the system")}
       isOpen={isOpen}
+      isLoading={isLoading}
       blockSize="large"
       inlineSize="large"
       {...props}
@@ -175,6 +183,7 @@ devices.").split(/[[\]]/);
           </Panels.Panel>
         </Panels>
       </Form>
+
       <Popup.Actions>
         <Popup.Confirm form="target-form" type="submit" isDisabled={isAcceptDisabled()} />
         <Popup.Cancel onClick={onCancel} />

web/src/components/storage/EncryptionField.jsx

@@ -106,6 +106,7 @@ export default function EncryptionField({
             method={method}
             methods={methods}
             isOpen={isDialogOpen}
+            isLoading={isLoading}
             onCancel={closeDialog}
             onAccept={onAccept}
           />

web/src/components/storage/EncryptionSettingsDialog.jsx

@@ -53,6 +53,7 @@ directly on its first run.");
  * @property {string} method - Encryption method.
  * @property {string[]} methods - Possible encryption methods.
  * @property {boolean} [isOpen=false] - Whether the dialog is visible or not.
+ * @property {boolean} [isLoading=false] - Whether the data is loading
  * @property {() => void} onCancel - Callback to trigger when on cancel action.
  * @property {(settings: EncryptionSetting) => void} onAccept - Callback to trigger on accept action.
  *
@@ -63,6 +64,7 @@ export default function EncryptionSettingsDialog({
   method: methodProp,
   methods,
   isOpen = false,
+  isLoading = false,
   onCancel,
   onAccept
 }) {
@@ -73,6 +75,13 @@ export default function EncryptionSettingsDialog({
   const [validSettings, setValidSettings] = useState(true);
   const formId = "encryptionSettingsForm";
 
+  // refresh the state when the real values are loaded
+  if (method === "" && methodProp !== "") { setMethod(methodProp) }
+  if (password === "" && passwordProp !== "") {
+    setPassword(passwordProp);
+    setIsEnabled(true);
+  }
+
   useEffect(() => {
     setValidSettings(!isEnabled || (password.length > 0 && passwordsMatch));
   }, [isEnabled, password, passwordsMatch]);
@@ -91,7 +100,7 @@ export default function EncryptionSettingsDialog({
   };
 
   return (
-    <Popup title={DIALOG_TITLE} description={DIALOG_DESCRIPTION} isOpen={isOpen}>
+    <Popup title={DIALOG_TITLE} description={DIALOG_DESCRIPTION} isOpen={isOpen} isLoading={isLoading}>
       <SwitchField
         highlightContent
         isChecked={isEnabled}

web/src/components/storage/InstallationDeviceField.jsx

@@ -109,7 +109,7 @@ export default function InstallationDeviceField({
 
   let value;
   if (isLoading || !target)
-    value = <Skeleton screenreaderText={_("Waiting for information about selected device")} width="25%" />;
+    value = <Skeleton width="25%" />;
   else
     value = targetValue(target, targetDevice, targetPVDevices);
 
@@ -127,6 +127,7 @@ export default function InstallationDeviceField({
         then={
           <DeviceSelectionDialog
             isOpen
+            isLoading={isLoading}
             target={target}
             targetDevice={targetDevice}
             targetPVDevices={targetPVDevices}

web/src/components/storage/InstallationDeviceField.test.jsx

@@ -97,8 +97,10 @@ describe("when set as loading", () => {
   });
 
   it("renders a loading hint", () => {
-    installerRender(<InstallationDeviceField {...props} />);
-    screen.getByText("Waiting for information about selected device");
+    const { container } = installerRender(<InstallationDeviceField {...props} />);
+
+    // a PF skeleton is displayed
+    expect(container.querySelector("div.pf-v5-c-skeleton")).toBeVisible();
   });
 });
 

web/src/components/storage/ProposalPage.jsx

@@ -35,6 +35,8 @@ import { IDLE } from "~/client/status";
 
 const initialState = {
   loading: true,
+  // which UI item is being changed by user
+  changing: undefined,
   availableDevices: [],
   volumeTemplates: [],
   encryptionMethods: [],
@@ -52,7 +54,8 @@ const reducer = (state, action) => {
     }
 
     case "STOP_LOADING" : {
-      return { ...state, loading: false };
+      // reset the changing value after the refresh is finished
+      return { ...state, loading: false, changing: undefined };
     }
 
     case "UPDATE_AVAILABLE_DEVICES": {
@@ -76,8 +79,8 @@ const reducer = (state, action) => {
     }
 
     case "UPDATE_SETTINGS": {
-      const { settings } = action.payload;
-      return { ...state, settings };
+      const { settings, changing } = action.payload;
+      return { ...state, settings, changing };
     }
 
     case "UPDATE_DEVICES": {
@@ -96,6 +99,30 @@ const reducer = (state, action) => {
   }
 };
 
+/**
+ * Which UI item is being changed by user
+ */
+export const CHANGING = Object.freeze({
+  ENCRYPTION: Symbol("encryption"),
+  TARGET: Symbol("target"),
+  VOLUMES: Symbol("volumes"),
+  POLICY: Symbol("policy"),
+  BOOT: Symbol("boot"),
+});
+
+// mapping of not affected values for settings components
+// key:   component name
+// value: list of items which can be changed without affecting
+//        the state of the component
+export const NOT_AFFECTED = {
+  // the EncryptionField shows the skeleton only during initial load,
+  // it does not depend on any changed item and does not show skeleton later.
+  // the ProposalResultSection is refreshed always
+  InstallationDeviceField: [CHANGING.ENCRYPTION, CHANGING.BOOT, CHANGING.POLICY, CHANGING.VOLUMES],
+  PartitionsField: [CHANGING.ENCRYPTION, CHANGING.POLICY],
+  SpacePolicyField: [CHANGING.ENCRYPTION, CHANGING.TARGET],
+};
+
 export default function ProposalPage() {
   const { storage: client } = useInstallerClient();
   const { cancellablePromise } = useCancellablePromise();
@@ -208,10 +235,10 @@ export default function ProposalPage() {
     }
   }, [client, load, state.settings]);
 
-  const changeSettings = async (settings) => {
+  const changeSettings = async (changing, settings) => {
     const newSettings = { ...state.settings, ...settings };
 
-    dispatch({ type: "UPDATE_SETTINGS", payload: { settings: newSettings } });
+    dispatch({ type: "UPDATE_SETTINGS", payload: { settings: newSettings, changing } });
     calculate(newSettings).catch(console.error);
   };
 
@@ -236,6 +263,7 @@ export default function ProposalPage() {
         settings={state.settings}
         onChange={changeSettings}
         isLoading={state.loading}
+        changing={state.changing}
       />
       <ProposalResultSection
         system={state.system}

web/src/components/storage/ProposalResultSection.jsx

@@ -207,7 +207,7 @@ const DevicesTreeTable = ({ devicesManager }) => {
 const ResultSkeleton = () => {
   return (
     <>
-      <Skeleton width="80%" />
+      <Skeleton screenreaderText={_("Waiting for information about storage configuration")} width="80%" />
       <Skeleton width="65%" />
       <Skeleton width="70%" />
     </>
@@ -251,6 +251,7 @@ const SectionContent = ({ system, staging, actions, errors }) => {
  * @param {Action[]} [props.actions=[]]
  * @param {ValidationError[]} [props.errors=[]] - Validation errors
  * @param {boolean} [props.isLoading=false] - Whether the section content should be rendered as loading
+ * @param {symbol} [props.changing=undefined] - Which part of the configuration is being changed by user
  */
 export default function ProposalResultSection({
   system = [],

web/src/components/storage/ProposalSettingsSection.jsx

@@ -26,6 +26,7 @@ import { _ } from "~/i18n";
 import { compact } from "~/utils";
 import { Section } from "~/components/core";
 import { SPACE_POLICIES } from "~/components/storage/utils";
+import { CHANGING, NOT_AFFECTED } from "~/components/storage/ProposalPage";
 import EncryptionField from "~/components/storage/EncryptionField";
 import InstallationDeviceField from "~/components/storage/InstallationDeviceField";
 import PartitionsField from "~/components/storage/PartitionsField";
@@ -40,6 +41,18 @@ import SpacePolicyField from "~/components/storage/SpacePolicyField";
  * @typedef {import ("~/client/storage").Volume} Volume
  */
 
+/**
+ * A helper function to decide whether to show the progress skeletons or not
+ * for the specified component
+ * @param {boolean} loading loading status
+ * @param {string} component name of the component
+ * @param {symbol} changing the item which is being changed
+ * @returns {boolean} true if the skeleton should be displayed, false otherwise
+ */
+const showSkeleton = (loading, component, changing) => {
+  return loading && !NOT_AFFECTED[component].includes(changing);
+};
+
 /**
  * Section for editing the proposal settings
  * @component
@@ -50,7 +63,8 @@ import SpacePolicyField from "~/components/storage/SpacePolicyField";
  * @property {String[]} encryptionMethods
  * @property {Volume[]} volumeTemplates
  * @property {boolean} [isLoading=false]
- * @property {(settings: object) => void} onChange
+ * @property {symbol} [changing=undefined] which part of the configuration is being changed by user
+ * @property {(changing: symbol, settings: object) => void} onChange
  *
  * @param {ProposalSettingsSectionProps} props
  */
@@ -60,41 +74,51 @@ export default function ProposalSettingsSection({
   encryptionMethods,
   volumeTemplates,
   isLoading = false,
+  changing = undefined,
   onChange
 }) {
   /** @param {import("~/components/storage/InstallationDeviceField").TargetConfig} targetConfig */
   const changeTarget = ({ target, targetDevice, targetPVDevices }) => {
-    onChange({
-      target,
-      targetDevice: targetDevice?.name,
-      targetPVDevices: targetPVDevices.map(d => d.name)
-    });
+    onChange(
+      CHANGING.TARGET,
+      {
+        target,
+        targetDevice: targetDevice?.name,
+        targetPVDevices: targetPVDevices.map(d => d.name)
+      }
+    );
   };
 
   /** @param {import("~/components/storage/EncryptionField").EncryptionConfig} encryptionConfig */
   const changeEncryption = ({ password, method }) => {
-    onChange({ encryptionPassword: password, encryptionMethod: method });
+    onChange(CHANGING.ENCRYPTION, { encryptionPassword: password, encryptionMethod: method });
   };
 
   /** @param {Volume[]} volumes */
   const changeVolumes = (volumes) => {
-    onChange({ volumes });
+    onChange(CHANGING.VOLUMES, { volumes });
   };
 
   /** @param {import("~/components/storage/SpacePolicyField").SpacePolicyConfig} spacePolicyConfig */
   const changeSpacePolicy = ({ spacePolicy, spaceActions }) => {
-    onChange({
-      spacePolicy: spacePolicy.id,
-      spaceActions
-    });
+    onChange(
+      CHANGING.POLICY,
+      {
+        spacePolicy: spacePolicy.id,
+        spaceActions
+      }
+    );
   };
 
   /** @param {import("~/components/storage/PartitionsField").BootConfig} bootConfig */
   const changeBoot = ({ configureBoot, bootDevice }) => {
-    onChange({
-      configureBoot,
-      bootDevice: bootDevice?.name
-    });
+    onChange(
+      CHANGING.BOOT,
+      {
+        configureBoot,
+        bootDevice: bootDevice?.name
+      }
+    );
   };
 
   /**
@@ -120,7 +144,7 @@ export default function ProposalSettingsSection({
           targetDevice={targetDevice}
           targetPVDevices={targetPVDevices}
           devices={availableDevices}
-          isLoading={isLoading}
+          isLoading={showSkeleton(isLoading, "InstallationDeviceField", changing)}
           onChange={changeTarget}
         />
         <EncryptionField
@@ -139,15 +163,15 @@ export default function ProposalSettingsSection({
           configureBoot={settings.configureBoot}
           bootDevice={bootDevice}
           defaultBootDevice={defaultBootDevice}
-          isLoading={isLoading || settings.volumes === undefined}
+          isLoading={showSkeleton(isLoading, "PartitionsField", changing) || settings.volumes === undefined}
           onVolumesChange={changeVolumes}
           onBootChange={changeBoot}
         />
         <SpacePolicyField
           policy={spacePolicy}
           actions={spaceActions}
           devices={installationDevices}
-          isLoading={isLoading}
+          isLoading={showSkeleton(isLoading, "SpacePolicyField", changing)}
           onChange={changeSpacePolicy}
         />
       </Section>