Merge pull request #544 from James9074/loading-device

Cleaner Device Loading UX

src/components/Sidebar.tsx

@@ -3,6 +3,8 @@ import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
 import { Subtle } from "@components/UI/Typography/Subtle.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import type { Page } from "@core/stores/deviceStore.ts";
+import { Spinner } from "@components/UI/Spinner.tsx";
+
 import {
   BatteryMediumIcon,
   CpuIcon,
@@ -67,46 +69,55 @@ export const Sidebar = ({ children }: SidebarProps) => {
   return showSidebar
     ? (
       <div className="min-w-[280px] max-w-min flex-col overflow-y-auto border-r-[0.5px] bg-background-primary border-slate-300 dark:border-slate-400">
-        <div className="flex justify-between px-8 pt-6">
+        {myNode === undefined ? (
-          <div>
+          <div className="flex flex-col items-center justify-center px-8 py-6">
-            <span className="text-lg font-medium">
+            <Spinner />
-              {myNode?.user?.shortName ?? "UNK"}
+            <Subtle className="mt-2">Loading device info...</Subtle>
-            </span>
-            <Subtle>{myNode?.user?.longName ?? "UNK"}</Subtle>
-          </div>
-          <button
-            type="button"
-            className="transition-all hover:text-accent"
-            onClick={() => setDialogOpen("deviceName", true)}
-          >
-            <EditIcon size={16} />
-          </button>
-          <button type="button" onClick={() => setShowSidebar(false)}>
-            <SidebarCloseIcon size={24} />
-          </button>
-        </div>
-        <div className="px-8 pb-6">
-          <div className="flex items-center">
-            <BatteryMediumIcon size={24} viewBox="0 0 28 24" />
-            <Subtle>
-              {myNode?.deviceMetrics?.batteryLevel
-                ? myNode?.deviceMetrics?.batteryLevel > 100
-                  ? "Charging"
-                  : `${myNode?.deviceMetrics?.batteryLevel}%`
-                : "UNK"}
-            </Subtle>
-          </div>
-          <div className="flex items-center">
-            <ZapIcon size={24} viewBox="0 0 36 24" />
-            <Subtle>
-              {myNode?.deviceMetrics?.voltage?.toPrecision(3) ?? "UNK"} volts
-            </Subtle>
-          </div>
-          <div className="flex items-center">
-            <CpuIcon size={24} viewBox="0 0 36 24" />
-            <Subtle>v{myMetadata?.firmwareVersion ?? "UNK"}</Subtle>
           </div>
-        </div>
+        ) : (
+          <>
+            <div className="flex justify-between px-8 pt-6">
+              <div>
+                <span className="text-lg font-medium">
+                  {myNode.user?.shortName ?? "UNK"}
+                </span>
+                <Subtle>{myNode.user?.longName ?? "UNK"}</Subtle>
+              </div>
+              <button
+                type="button"
+                className="transition-all hover:text-accent"
+                onClick={() => setDialogOpen("deviceName", true)}
+              >
+                <EditIcon size={16} />
+              </button>
+              <button type="button" onClick={() => setShowSidebar(false)}>
+                <SidebarCloseIcon size={24} />
+              </button>
+            </div>
+            <div className="px-8 pb-6">
+              <div className="flex items-center">
+                <BatteryMediumIcon size={24} viewBox="0 0 28 24" />
+                <Subtle>
+                  {myNode.deviceMetrics?.batteryLevel
+                    ? myNode.deviceMetrics.batteryLevel > 100
+                      ? "Charging"
+                      : `${myNode.deviceMetrics.batteryLevel}%`
+                    : "UNK"}
+                </Subtle>
+              </div>
+              <div className="flex items-center">
+                <ZapIcon size={24} viewBox="0 0 36 24" />
+                <Subtle>
+                  {myNode.deviceMetrics?.voltage?.toPrecision(3) ?? "UNK"} volts
+                </Subtle>
+              </div>
+              <div className="flex items-center">
+                <CpuIcon size={24} viewBox="0 0 36 24" />
+                <Subtle>v{myMetadata?.firmwareVersion ?? "UNK"}</Subtle>
+              </div>
+            </div>
+          </>
+        )}
 
         <SidebarSection label="Navigation">
           {pages.map((link) => (
@@ -115,9 +126,12 @@ export const Sidebar = ({ children }: SidebarProps) => {
               label={link.name}
               Icon={link.icon}
               onClick={() => {
-                setActivePage(link.page);
+                if (myNode !== undefined) {
+                  setActivePage(link.page);
+                }
               }}
               active={link.page === activePage}
+              disabled={myNode === undefined}
             />
           ))}
         </SidebarSection>

src/components/UI/Sidebar/sidebarButton.tsx

@@ -7,6 +7,7 @@ export interface SidebarButtonProps {
   Icon?: LucideIcon;
   element?;
   onClick?: () => void;
+  disabled?: boolean;
 }
 
 export const SidebarButton = ({
@@ -15,12 +16,14 @@ export const SidebarButton = ({
   Icon,
   element,
   onClick,
+  disabled = false,
 }: SidebarButtonProps) => (
   <Button
     onClick={onClick}
     variant={active ? "subtle" : "ghost"}
     size="sm"
     className="flex gap-2 w-full"
+    disabled={disabled}
   >
     {Icon && <Icon size={16} />}
     {element && element}