Replace network signal icons with labels to prevent stuttering bug.

modules/menus/network/utils.js

@@ -0,0 +1,23 @@
+const getWifiIcon = (iconName) => {
+  const deviceIconMap = [
+    ["network-wireless-acquiring", "󰤩"],
+    ["network-wireless-connected", "󰤨"],
+    ["network-wireless-encrypted", "󰤪"],
+    ["network-wireless-hotspot", "󰤨"],
+    ["network-wireless-no-route", "󰤩"],
+    ["network-wireless-offline", "󰤮"],
+    ["network-wireless-signal-excellent", "󰤨"],
+    ["network-wireless-signal-good", "󰤥"],
+    ["network-wireless-signal-ok", "󰤢"],
+    ["network-wireless-signal-weak", "󰤟"],
+    ["network-wireless-signal-none", "󰤯"],
+  ];
+
+  const foundMatch = deviceIconMap.find((icon) =>
+    RegExp(icon[0]).test(iconName.toLowerCase()),
+  );
+
+  return foundMatch ? foundMatch[1] : "󰤨";
+};
+
+export { getWifiIcon };

modules/menus/network/wifi/WirelessAPs.js

@@ -1,3 +1,4 @@
+import { getWifiIcon } from "../utils.js";
 const renderWAPs = (self, network, staging, connecting) => {
   const getIdBySsid = (ssid, nmcliOutput) => {
     const lines = nmcliOutput.trim().split("\n");
@@ -26,17 +27,12 @@ const renderWAPs = (self, network, staging, connecting) => {
     failed: "Connection Failed",
   };
   self.hook(network, () => {
-    console.log(JSON.stringify(network, null, 2));
-    Utils.merge(
-      [staging.bind("value"), connecting.bind("value")],
-      () => {
+    Utils.merge([staging.bind("value"), connecting.bind("value")], () => {
       // Sometimes the network service will yield a "this._device is undefined" when
       // trying to access the "access_points" property. So we must validate that
       // it's not 'undefined'
       let WAPs =
-          network.wifi._device !== undefined
-            ? network.wifi["access-points"]
-            : [];
+        network.wifi._device !== undefined ? network.wifi["access-points"] : [];
 
       const dedupeWAPs = () => {
         const dedupMap = {};
@@ -80,10 +76,7 @@ const renderWAPs = (self, network, staging, connecting) => {
         return b.strength - a.strength;
       });
 
-        if (
-          filteredWAPs.length <= 0 &&
-          Object.keys(staging.value).length === 0
-        ) {
+      if (filteredWAPs.length <= 0 && Object.keys(staging.value).length === 0) {
         return (self.child = Widget.Label({
           class_name: "waps-not-found dim",
           expand: true,
@@ -132,15 +125,18 @@ const renderWAPs = (self, network, staging, connecting) => {
                     hpack: "start",
                     hexpand: true,
                     children: [
-                        Widget.Icon({
+                      Widget.Label({
+                        vpack: "start",
                         class_name: `network-icon wifi ${ap.ssid === network.wifi.ssid ? "active" : ""}`,
-                          icon: `${ap["iconName"]}`,
+                        label: getWifiIcon(`${ap["iconName"]}`),
                       }),
                       Widget.Box({
                         class_name: "connection-container",
+                        vpack: "center",
                         vertical: true,
                         children: [
                           Widget.Label({
+                            vpack: "center",
                             class_name: "active-connection",
                             hpack: "start",
                             truncate: "end",
@@ -153,9 +149,7 @@ const renderWAPs = (self, network, staging, connecting) => {
                               hpack: "start",
                               class_name: "connection-status dim",
                               label:
-                                  WifiStatusMap[
-                                  network.wifi.state.toLowerCase()
-                                  ],
+                                WifiStatusMap[network.wifi.state.toLowerCase()],
                             }),
                           }),
                         ],
@@ -183,8 +177,7 @@ const renderWAPs = (self, network, staging, connecting) => {
                 class_name: "menu-icon-button network disconnect",
                 on_primary_click: () => {
                   connecting.value = ap.bssid;
-                    Utils.execAsync("nmcli connection show --active").then(
-                      () => {
+                  Utils.execAsync("nmcli connection show --active").then(() => {
                     Utils.execAsync("nmcli connection show --active").then(
                       (res) => {
                         const connectionId = getIdBySsid(ap.ssid, res);
@@ -201,19 +194,17 @@ const renderWAPs = (self, network, staging, connecting) => {
                           });
                       },
                     );
-                      },
-                    );
+                  });
                 },
                 child: Widget.Label({
-                    label: "󰚃"
+                  label: "󰚃",
                 }),
               }),
             }),
           ],
         });
       }));
-      },
-    );
+    });
   });
 };
 

scss/menus/network.scss

@@ -21,7 +21,6 @@
         font-size: 1.3em;
         min-width: 1em;
         min-height: 1em;
-        
         color: $overlay1;
 
         &.active {