fix: Bugs created after the overhaul, performance and layout fixes

frontend/src/devices/DeviceList.jsx

@@ -137,20 +137,21 @@ export default function DeviceList() {
       if (onlineFilter === "false") params.set("online", "false");
       if (tierFilter) params.set("tier", tierFilter);
       const qs = params.toString();
-      const [data, mqttData] = await Promise.all([
-        api.get(`/devices${qs ? `?${qs}` : ""}`),
-        api.get("/mqtt/status").catch(() => null),
-      ]);
+      // Phase 1: load devices from DB immediately
+      const data = await api.get(`/devices${qs ? `?${qs}` : ""}`);
       setDevices(data.devices);
+      setLoading(false);
 
-      // Build MQTT status lookup by device serial
-      if (mqttData?.devices) {
-        const map = {};
-        for (const s of mqttData.devices) {
-          map[s.device_serial] = s;
+      // Phase 2: fetch MQTT status in background and update online indicators
+      api.get("/mqtt/status").then((mqttData) => {
+        if (mqttData?.devices) {
+          const map = {};
+          for (const s of mqttData.devices) {
+            map[s.device_serial] = s;
+          }
+          setMqttStatusMap(map);
         }
-        setMqttStatusMap(map);
-      }
+      }).catch(() => {});
     } catch (err) {
       setError(err.message);
     } finally {
@@ -289,7 +290,7 @@ export default function DeviceList() {
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>Devices</h1>
+        <h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>Device Fleet</h1>
         {canEdit && (
           <button
             onClick={() => navigate("/devices/new")}