Skip to content

Starting up

A page load runs in this order:

  1. Theme first. A small inline script in index.html reads localStorage['nessie-theme'] and sets data-bs-theme on <html> before anything is drawn, so the page never flashes in the wrong colours.
  2. Static frame. index.html already contains the header, the sidebar shell, an empty <main id="view">, the player bar, and the panels (Now Playing, queue). Most of these are custom elements like <nessie-sidebar> that draw themselves.
  3. Components register. main.js imports every file in components/. Each one calls customElements.define, and the tags already in the page come to life.
  4. Who's listening? loadMe() calls GET /v1/me. If the answer isn't signed_in (profiles are on and this device hasn't picked one), the profile picker covers the screen and startup stops there. Once a profile is picked, the picker starts the app again.
  5. Data and player. It loads the libraries (GET /v1/library/libraries) into the sidebar, gives the shared Player to the player bar, queue and Now Playing, and starts the player.
  6. Routing starts. Once integrations are known (whether Lidarr is on), the router reads the address and draws the first view.
  7. Extras. It wires the search box, the keyboard shortcuts (Space plays and pauses, / jumps to search), and the request events. Then it registers the service worker and sets up the AI button at the end of the search box (startAiPrompt()).