perf: optimize dashboard rendering paths

Author: awesomestvi

README.md

@@ -60,10 +60,10 @@ Navet (Swedish for "the hub") is a modern, responsive smart home dashboard built
 - **Secure Connections** - Direct connection to your smart home instance
 
 ### ⚡ Performance
-- **Optimized Bundle** - 1.2MB (52% smaller after cleanup)
-- **28 Dependencies** - Removed 19 unused packages (-40%)
-- **Fast Loading** - ~400ms first load time
-- **Smart Re-renders** - Zustand selective subscriptions
+- **Lazy-Loaded UI** - Settings, add-card flows, widgets, and media dialogs load on demand
+- **Deferred Room Rendering** - Offscreen room groups are deferred in the All view
+- **Smart Re-renders** - Zustand-backed search state and stable device maps reduce dashboard churn
+- **No-Animation Mode** - Optional global animation disable for slower devices
 - **Tree-shakeable** - Only imports what's actually used
 
 ## 🚀 Installation
@@ -83,51 +83,43 @@ Navet (Swedish for "the hub") is a modern, responsive smart home dashboard built
 
 2. **Install dependencies**
    ```bash
-   npm install
-   # or
    pnpm install
    ```
 
 3. **Configure your smart home connection**
-   
-   Update `/src/app/hooks/use-devices.ts` with your smart home system URL and token:
-   ```typescript
-   const HA_URL = 'http://your-smart-home:8123';
-   const HA_TOKEN = 'your-long-lived-access-token';
+
+   Create a local env file from the example and set your Home Assistant connection details:
+   ```bash
+   cp .env.example .env
+   ```
+
+   Then set:
+   ```env
+   NAVET_HASS_URL=http://your-home-assistant:8123
+   NAVET_HASS_TOKEN=your-long-lived-access-token
    ```
 
 4. **Start development server**
    ```bash
-   npm run dev
+   pnpm dev
    ```
 
 5. **Open in browser**
-   
-   Navigate to `http://localhost:5173`
+
+   Navigate to `http://navet.homeassistant.local:5200`
 
 ## 📖 Usage
 
 ### First Time Setup
 
-1. **Login** - Use default credentials (demo/demo123) or configure your own
-2. **Connect System** - Ensure your smart home instance is accessible
-3. **Customize Layout** - Enter Edit Mode to arrange cards
+1. **Provide Home Assistant credentials** via `.env`, Docker runtime config, or the in-app login screen
+2. **Connect System** - Ensure your Home Assistant instance is accessible
+3. **Customize Layout** - Enter Edit Mode to arrange rooms and cards
 4. **Choose Theme** - Select your preferred color scheme and theme mode
+5. **Optional for slower hardware** - Disable animations in Settings -> Performance
 
 ### Features Guide
 
-#### Custom Widgets
-- Enter **Edit Mode** and click **Add Card**
-- Choose from 5 widget types:
-  - **Calendar** - View upcoming events
-  - **News Feed** - Latest headlines
-  - **Weather** - Current conditions and forecast
-  - **Photo Frame** - Beautiful photo carousel
-  - **Quick Note** - Editable sticky notes
-- Select size (small/medium/large)
-- **Delete widgets** by clicking the X button in edit mode
-- Widgets are saved and persist across sessions
-
 #### Edit Mode
 - Click the **Edit** button in the header
 - **Add widgets** with the Add Card button
@@ -170,9 +162,9 @@ Navet (Swedish for "the hub") is a modern, responsive smart home dashboard built
 - **Zustand** - State management with persistence
 - **Tailwind CSS v4** - Utility-first styling
 - **Radix UI** - Accessible component primitives
-- **React DnD** - Drag and drop functionality
+- **dnd-kit** - Drag and drop functionality
 - **Lucide React** - Icon library
-- **Motion** (Framer Motion) - Animations
+- **Vite** - Development server and build tooling
 
 ## 📄 License
 
@@ -225,7 +217,7 @@ For technical documentation and developer guides, see [`/docs/README.md`](docs/R
 
 ## 🐛 Bug Reports & Feature Requests
 
-Found a bug or have an idea? [Open an issue](https://github.com/awesomestvi/home-assistant-dashboard/issues)!
+Found a bug or have an idea? [Open an issue](https://github.com/awesomestvi/navet/issues)!
 
 ## 📸 Screenshots
 

docs/DOCKER_HOME_ASSISTANT_ADDON.md

@@ -49,19 +49,21 @@ If those are unset, Navet falls back to manual setup in the UI.
 ### Local Run Example
 
 ```bash
-docker compose up --build
+docker compose pull
+docker compose up -d
 ```
 
 Then open `http://localhost:8080`.
 
 ### Release Pipeline
 
-The GitHub Actions publish workflow is manual for private-repo use. It publishes a multi-arch image to GitHub Container Registry:
+The GitHub Actions publish workflow publishes a multi-arch image to GitHub Container Registry on pushes to `main`, and it can also be run manually:
 
-- `ghcr.io/<owner>/navet:<version>`
+- `ghcr.io/<owner>/navet:main`
+- `ghcr.io/<owner>/navet:sha-<commit>`
 - `ghcr.io/<owner>/navet:latest`
 
-Run it from the GitHub Actions UI and provide a version string such as `0.1.0-private.1`.
+Manual dispatch can still publish an additional version tag such as `0.1.0-private.1`.
 
 ### Private GHCR Deployment
 
@@ -128,10 +130,9 @@ For private Home Assistant development:
 
 For standalone Docker users:
 
-1. Open the `Publish` workflow in GitHub Actions
-2. Enter a version like `0.1.0-private.1`
-3. Run the workflow
-4. Pull the updated image from GHCR on your deployment host
+1. Push changes to `main` or run the `Publish` workflow manually
+2. Pull the updated image from GHCR on your deployment host
+3. Restart the container with `docker compose up -d`
 
 ## Runtime Config Resolution
 
@@ -141,6 +142,16 @@ The app resolves Home Assistant defaults in this order:
 2. Runtime `window.__NAVET_CONFIG__` from `/config.js`
 3. Build-time `import.meta.env.NAVET_HASS_URL` and `import.meta.env.NAVET_HASS_TOKEN`
 
+## Current Performance Work
+
+The current dashboard build includes a few runtime-focused optimizations:
+
+- Lazy-loaded settings, add-card dialog, widgets, and media dialog
+- Deferred rendering for offscreen room groups in the All view
+- Zustand-backed search result state to reduce context fan-out
+- Stable device-map reuse to avoid rerendering unchanged cards
+- Optional no-animation mode for slower devices such as Raspberry Pi deployments
+
 ## Remaining Limitation
 
 The current add-on still expects explicit Home Assistant connection details. It does not yet use Supervisor-native authentication or automatically derive a user-scoped Home Assistant session.
@@ -159,7 +170,7 @@ If you are the only consumer right now:
 
 1. Keep the repo private
 2. Use local add-on installs for Home Assistant testing
-3. Use the manual GHCR publish workflow for remote Docker deployments
+3. Let pushes to `main` publish the GHCR image for remote Docker deployments
 4. Move to tag-based or public releases only when you are ready to distribute the project
 
 ## Notes Specific to This Repo
@@ -168,6 +179,7 @@ If you are the only consumer right now:
 - That only affects development and does not block Docker packaging
 - `index.html` now loads `/config.js` before the app bootstraps
 - Home Assistant credentials are still persisted in browser storage after login
+- Development builds log slow dashboard renders with `[Navet][RenderProfiler]`
 
 ## If You Want Full Add-on UX
 

docs/README.md

@@ -41,9 +41,8 @@ Complete documentation for the Navet smart home dashboard.
 ### Project History
 - **[Change History](archive/CHANGES.md)** - Major changes and migrations
   - Rebranding to Navet
-  - Preact migration
-  - Zustand migration
-  - DnD kit migration
+  - State management migrations
+  - Drag-and-drop migration
   - Optimization history
 - **[Organization Summary](archive/CLEANUP_SUMMARY.md)** - Documentation cleanup details
 
@@ -72,6 +71,9 @@ Complete documentation for the Navet smart home dashboard.
 **Run Navet in Docker or as a Home Assistant add-on:**
 → See [Docker and Home Assistant Add-on](DOCKER_HOME_ASSISTANT_ADDON.md)
 
+**Understand recent performance work:**
+→ See [Docker and Home Assistant Add-on -> Current Performance Work](DOCKER_HOME_ASSISTANT_ADDON.md#current-performance-work)
+
 ## 📖 Documentation Organization
 
 This documentation is organized into:
@@ -120,5 +122,5 @@ docs/
 
 ---
 
-**Last Updated:** March 6, 2026  
+**Last Updated:** March 7, 2026  
 **Documentation Status:** ✅ Complete and organized

src/app/App.tsx

@@ -8,7 +8,7 @@ import {
   useSensors,
 } from '@dnd-kit/core';
 import { Lightbulb } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import { RoomNav } from './components/layout/room-nav';
 import {
@@ -19,6 +19,7 @@ import {
 } from './components/layout/sections';
 import { EmptyState } from './components/shared/empty-state';
 import { LoadingSpinner } from './components/shared/loading-spinner';
+import { RenderProfiler } from './components/shared/render-profiler';
 import { Toaster } from './components/ui/sonner';
 import { AuthProvider, useAuth } from './contexts/auth-context';
 import { ConfigProvider, useConfig } from './contexts/config-context';
@@ -31,10 +32,9 @@ import { SearchProvider } from './contexts/search-context';
 import { ThemeProvider } from './contexts/theme-context';
 import { LoginPage } from './features/auth/login-page';
 import { AllViewGrid } from './features/dashboard/all-view-grid';
-import { AddCardDialog, type CardType } from './features/dashboard/components/add-card-dialog';
+import type { CardType } from './features/dashboard/components/add-card-dialog';
 import { DashboardLayout } from './features/dashboard/dashboard-layout';
 import { DeviceGrid } from './features/dashboard/device-grid';
-import { SettingsSection } from './features/settings/components/settings-section';
 import {
   useCardOrdering,
   useCardState,
@@ -47,6 +47,16 @@ import { useCustomCards } from './hooks/use-custom-cards';
 import { useDevices, useRooms } from './hooks/use-devices';
 import { useSettingsStore } from './stores';
 
+const AddCardDialog = lazy(async () => {
+  const module = await import('./features/dashboard/components/add-card-dialog');
+  return { default: module.AddCardDialog };
+});
+
+const SettingsSection = lazy(async () => {
+  const module = await import('./features/settings/components/settings-section');
+  return { default: module.SettingsSection };
+});
+
 /**
  * Dashboard Component
  * The main dashboard view after authentication
@@ -230,7 +240,9 @@ function Dashboard() {
       <DashboardLayout>
         {lightDeviceMap.size > 0 ? (
           <EditModeProvider value={editModeContextValue}>
-            <AllViewGrid deviceMap={lightDeviceMap} rooms={lightRooms} cardOrders={cardOrders} />
+            <RenderProfiler id="LightsSection">
+              <AllViewGrid deviceMap={lightDeviceMap} rooms={lightRooms} cardOrders={cardOrders} />
+            </RenderProfiler>
           </EditModeProvider>
         ) : (
           <EmptyState
@@ -254,7 +266,11 @@ function Dashboard() {
   if (activeSection === 'settings') {
     return (
       <DashboardLayout>
-        <SettingsSection />
+        <Suspense fallback={<LoadingSpinner message="Loading settings..." />}>
+          <RenderProfiler id="SettingsSection">
+            <SettingsSection />
+          </RenderProfiler>
+        </Suspense>
       </DashboardLayout>
     );
   }
@@ -280,30 +296,38 @@ function Dashboard() {
           />
 
           {activeRoom === 'All' ? (
-            <AllViewGrid
-              deviceMap={deviceMap}
-              rooms={roomOrder}
-              cardOrders={cardOrders}
-              customCards={customCards}
-              onDeleteCard={handleDeleteCard}
-              onUpdateCard={handleUpdateCard}
-            />
+            <RenderProfiler id="AllViewGrid">
+              <AllViewGrid
+                deviceMap={deviceMap}
+                rooms={roomOrder}
+                cardOrders={cardOrders}
+                customCards={customCards}
+                onDeleteCard={handleDeleteCard}
+                onUpdateCard={handleUpdateCard}
+              />
+            </RenderProfiler>
           ) : (
-            <DeviceGrid
-              orderedCardIds={orderedCardIds}
-              deviceMap={deviceMap}
-              customCards={customCards}
-              onDeleteCard={handleDeleteCard}
-              onUpdateCard={handleUpdateCard}
-            />
+            <RenderProfiler id={`DeviceGrid:${activeRoom}`}>
+              <DeviceGrid
+                orderedCardIds={orderedCardIds}
+                deviceMap={deviceMap}
+                customCards={customCards}
+                onDeleteCard={handleDeleteCard}
+                onUpdateCard={handleUpdateCard}
+              />
+            </RenderProfiler>
           )}
 
-          <AddCardDialog
-            open={showAddCardDialog}
-            onClose={() => setShowAddCardDialog(false)}
-            onAddCard={handleAddCard}
-            currentRoom={activeRoom}
-          />
+          {showAddCardDialog && (
+            <Suspense fallback={null}>
+              <AddCardDialog
+                open={showAddCardDialog}
+                onClose={() => setShowAddCardDialog(false)}
+                onAddCard={handleAddCard}
+                currentRoom={activeRoom}
+              />
+            </Suspense>
+          )}
         </DashboardLayout>
       </DndContext>
     </EditModeProvider>

src/app/components/figma/ImageWithFallback.tsx

@@ -21,10 +21,26 @@ export const ImageWithFallback = memo(function ImageWithFallback(
       style={style}
     >
       <div className="flex items-center justify-center w-full h-full">
-        <img src={ERROR_IMG_SRC} alt="Failed to load" {...rest} data-original-url={src} />
+        <img
+          src={ERROR_IMG_SRC}
+          alt="Failed to load"
+          loading="lazy"
+          decoding="async"
+          {...rest}
+          data-original-url={src}
+        />
       </div>
     </div>
   ) : (
-    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+    <img
+      src={src}
+      alt={alt}
+      loading={rest.loading ?? 'lazy'}
+      decoding={rest.decoding ?? 'async'}
+      className={className}
+      style={style}
+      {...rest}
+      onError={handleError}
+    />
   );
 });