fix: device details subnet on load MAASENG-3036 (#5394)

src/app/base/components/NodeSummaryNetworkCard/NodeSummaryNetworkCard.test.tsx

@@ -16,6 +16,7 @@ describe("NodeSummaryNetworkCard", () => {
       device: factory.deviceState({ loaded: true }),
       fabric: factory.fabricState({ loaded: true }),
       vlan: factory.vlanState({ loaded: true }),
+      subnet: factory.subnetState({ loaded: true }),
     });
   });
 
@@ -33,6 +34,7 @@ describe("NodeSummaryNetworkCard", () => {
 
     expect(actions.some((action) => action.type === "fabric/fetch"));
     expect(actions.some((action) => action.type === "vlan/fetch"));
+    expect(actions.some((action) => action.type === "subnet/fetch"));
   });
 
   it("shows a spinner while network data is loading", () => {

src/app/base/components/NodeSummaryNetworkCard/NodeSummaryNetworkCard.tsx

@@ -12,6 +12,8 @@ import type { Device } from "@/app/store/device/types";
 import { fabricActions } from "@/app/store/fabric";
 import fabricSelectors from "@/app/store/fabric/selectors";
 import type { MachineDetails } from "@/app/store/machine/types";
+import { subnetActions } from "@/app/store/subnet";
+import subnetSelectors from "@/app/store/subnet/selectors";
 import type { NetworkInterface } from "@/app/store/types/node";
 import { vlanActions } from "@/app/store/vlan";
 import vlanSelectors from "@/app/store/vlan/selectors";
@@ -107,15 +109,21 @@ const NodeSummaryNetworkCard = ({
 }: Props): JSX.Element => {
   const fabricsLoaded = useSelector(fabricSelectors.loaded);
   const vlansLoaded = useSelector(vlanSelectors.loaded);
+  const subnetsLoaded = useSelector(subnetSelectors.loaded);
+  const allNetworkingLoaded = fabricsLoaded && vlansLoaded && subnetsLoaded;
 
-  useFetchActions([fabricActions.fetch, vlanActions.fetch]);
+  useFetchActions([
+    fabricActions.fetch,
+    vlanActions.fetch,
+    subnetActions.fetch,
+  ]);
 
   let content: JSX.Element;
 
   // Confirm that the full machine details have been fetched. This also allows
   // TypeScript know we're using the right union type (otherwise it will
   // complain that interfaces doesn't exist on the base machine type).
-  if (interfaces && fabricsLoaded && vlansLoaded) {
+  if (interfaces && allNetworkingLoaded) {
     const groupedInterfaces = groupInterfaces(interfaces);
     content = (
       <>