Skip to content

Commit 90f8c85

Browse files
authored
Update network-status-interface elements in-place (#1923)
Resolves tiny-pilot/tinypilot-pro#1648 This PR updates each network-status-interface element in-place, on the network-status-dialog, to avoid a brief flash of unstyled content (FOUC) that seems to be an [issue with native Web Components](https://stackoverflow.com/questions/62683430/how-to-stop-fouc-from-happening-with-native-web-components). <a data-ca-tag href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1923"><img src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review on CodeApprove" /></a>
1 parent 2120252 commit 90f8c85

File tree

1 file changed

+23
-5
lines changed

1 file changed

+23
-5
lines changed

app/templates/custom-elements/network-status-dialog.html

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@ <h3>Network Status</h3>
5555
};
5656
_statesWithoutDialogClose = new Set([this._states.INITIALIZING]);
5757

58+
constructor() {
59+
super();
60+
this._interfaceElements = {};
61+
}
62+
5863
connectedCallback() {
5964
this.attachShadow({ mode: "open" }).appendChild(
6065
template.content.cloneNode(true)
@@ -130,19 +135,32 @@ <h3>Network Status</h3>
130135
);
131136
return;
132137
}
133-
this._elements.interfacesContainer.innerHTML = "";
134138
networkStatus.forEach((iface) => {
135-
const interfaceElement = document.createElement(
136-
"network-status-interface"
137-
);
139+
let interfaceElement = this._interfaceElements[iface.name];
140+
if (!interfaceElement) {
141+
interfaceElement = document.createElement(
142+
"network-status-interface"
143+
);
144+
this._interfaceElements[iface.name] = interfaceElement;
145+
this._elements.interfacesContainer.appendChild(interfaceElement);
146+
}
138147
const displayName = iface.name.startsWith("eth")
139148
? `LAN${parseInt(iface.name.slice(3)) + 1}`
140149
: iface.name.startsWith("wlan")
141150
? "Wi-Fi"
142151
: iface.name;
143-
this._elements.interfacesContainer.appendChild(interfaceElement);
144152
interfaceElement.setEthernetWifi(displayName, iface);
145153
});
154+
const availableInterfaceNames = networkStatus.map(
155+
(iface) => iface.name
156+
);
157+
// Remove unavailable network interface elements.
158+
Object.keys(this._interfaceElements)
159+
.filter((key) => !availableInterfaceNames.includes(key))
160+
.forEach((interfaceName) => {
161+
this._interfaceElements[interfaceName].remove();
162+
delete this._interfaceElements[interfaceName];
163+
});
146164
}
147165
}
148166
);

0 commit comments

Comments
 (0)