Update demo (#3292)

* Update demo

* Kill homebridge hidden

* Add missing air translation

* Hide demo card with localStorage.hide_demo_card

* adjust size of demo card if hidden

* disable lint rule

build-scripts/gulp/translations.js

@@ -34,6 +34,7 @@ const TRANSLATION_FRAGMENTS = [
   "profile",
   "shopping-list",
   "page-authorize",
+  "page-demo",
   "page-onboarding",
 ];
 

demo/src/configs/arsaboo/entities.ts

@@ -1,6 +1,7 @@
-import { Entity, convertEntities } from "../../../../src/fake_data/entity";
+import { convertEntities } from "../../../../src/fake_data/entity";
+import { DemoConfig } from "../types";
 
-export const demoEntitiesArsaboo: () => Entity[] = () =>
+export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
   convertEntities({
     "zone.home": {
       entity_id: "zone.home",
@@ -43,10 +44,9 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
     },
     "sensor.livingroom_temp_rounded": {
       entity_id: "sensor.livingroom_temp_rounded",
-      state: "66",
+      state: "21",
       attributes: {
         friendly_name: "Living room temperature",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T18:23:58.615703+00:00",
       last_updated: "2019-01-22T18:23:58.615703+00:00",
@@ -54,33 +54,19 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
     },
     "sensor.study_temp_rounded": {
       entity_id: "sensor.study_temp_rounded",
-      state: "67",
+      state: "23",
       attributes: {
         friendly_name: "Study temperature",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T19:17:17.881894+00:00",
       last_updated: "2019-01-22T19:17:17.881894+00:00",
       context: { id: "9e25fd2c4032461f83df3ed778fc031e", user_id: null },
     },
-    "sensor.sonos_audio_in": {
-      entity_id: "sensor.sonos_audio_in",
-      state: "Paused",
-      attributes: {
-        friendly_name: "Sonos Audio-in",
-        icon: "hademo:volume-high",
-        homebridge_hidden: true,
-      },
-      last_changed: "2019-01-22T17:00:14.678332+00:00",
-      last_updated: "2019-01-22T17:00:14.678332+00:00",
-      context: { id: "072d120e6d584e4d88e3222196b27e4d", user_id: null },
-    },
     "sensor.living_room": {
       entity_id: "sensor.living_room",
-      state: "PowerOff",
+      state: "YouTube",
       attributes: {
-        friendly_name: "Harmony Activity",
+        friendly_name: "Harmony",
-        homebridge_hidden: true,
         entity_picture: "/assets/arsaboo/icons/Harmony.png",
       },
       last_changed: "2019-01-22T17:00:14.722625+00:00",
@@ -93,9 +79,10 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       attributes: {
         value: "25m",
         unit_of_measurement: "h",
-        friendly_name: "Total TV Time",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.labels.total_tv_time"
+        ),
         icon: "hademo:chart-line",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T17:00:14.938049+00:00",
       last_updated: "2019-01-22T17:00:14.938049+00:00",
@@ -124,10 +111,10 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         operation: "fan",
         climate_list: ["Away", "Sleep", "Day", "Home"],
         fan_min_on_time: 10,
-        friendly_name: "Upstairs",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.names.upstairs"
+        ),
         supported_features: 3575,
-        homebridge_hidden: true,
-        entity_picture: "/assets/arsaboo/icons/Ecobee.png",
       },
       last_changed: "2019-01-22T16:59:56.810867+00:00",
       last_updated: "2019-01-22T19:33:14.146114+00:00",
@@ -139,7 +126,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       attributes: {
         friendly_name: "Abode Updates",
         icon: "hademo:security",
-        homebridge_hidden: true,
         templates: {
           icon_color:
             "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
@@ -156,7 +142,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       attributes: {
         friendly_name: "TV",
         icon: "hademo:television",
-        homebridge_hidden: false,
         templates: {
           icon_color:
             "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
@@ -172,7 +157,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       attributes: {
         friendly_name: "Home Automation",
         icon: "hass:home-automation",
-        homebridge_hidden: true,
         templates: {
           icon_color:
             "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
@@ -188,7 +172,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       attributes: {
         friendly_name: "TV Time",
         icon: "hademo:television-guide",
-        homebridge_hidden: true,
         templates: {
           icon:
             "if (state === 'on') return 'hademo:television-classic'; return 'hademo:television-classic-off';\n",
@@ -202,16 +185,18 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
     },
     "input_select.livingroomharmony": {
       entity_id: "input_select.livingroomharmony",
-      state: "PowerOff",
+      state: "YouTube",
       attributes: {
         options: [
           "PowerOff",
           "Watch Fire TV",
-          "Youtube",
+          "YouTube",
           "SATV",
           "Watch Apple TV",
         ],
-        friendly_name: "Harmony Activity",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.labels.activity"
+        ),
         icon: "hademo:remote",
       },
       last_changed: "2019-01-22T16:59:56.884366+00:00",
@@ -223,7 +208,9 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       state: "Shield",
       attributes: {
         options: ["AppleTV", "FireTV", "Shield"],
-        friendly_name: "HDMI Switcher",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.labels.hdmi_switcher"
+        ),
         icon: "hademo:remote",
       },
       last_changed: "2019-01-22T16:59:56.884597+00:00",
@@ -235,7 +222,9 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       state: "InputHdmi4",
       attributes: {
         options: ["InputHdmi1", "InputHdmi2", "InputHDMI3", "InputHdmi4"],
-        friendly_name: "HDMI Input",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.labels.hdmi_input"
+        ),
         icon: "hademo:remote",
       },
       last_changed: "2019-01-22T16:59:56.884850+00:00",
@@ -251,7 +240,9 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         max: 100,
         step: 1,
         mode: "slider",
-        friendly_name: "Volume",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.labels.volume"
+        ),
         icon: "hademo:volume-high",
       },
       last_changed: "2019-01-22T17:00:16.104666+00:00",
@@ -263,7 +254,9 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       state: "off",
       attributes: {
         last_triggered: null,
-        friendly_name: "Turn Television off",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.labels.turn_tv_off"
+        ),
       },
       last_changed: "2019-01-22T16:59:57.074073+00:00",
       last_updated: "2019-01-22T16:59:57.074073+00:00",
@@ -279,7 +272,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         unit_of_measurement: "INR",
         friendly_name: "USDINR",
         icon: "hademo:currency-usd",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T18:25:11.582558+00:00",
       last_updated: "2019-01-22T18:25:11.582558+00:00",
@@ -292,7 +284,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         friendly_name: "Garage Door",
         icon: "hademo:garage",
         supported_features: 11,
-        homebridge_hidden: false,
         homebridge_cover_type: "garage_door",
       },
       last_changed: "2019-01-22T19:31:05.399638+00:00",
@@ -307,7 +298,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         max_mireds: 500,
         friendly_name: "Master Lights",
         supported_features: 63,
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T16:59:57.423884+00:00",
       last_updated: "2019-01-22T16:59:57.423884+00:00",
@@ -321,7 +311,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         max_mireds: 400,
         friendly_name: "Living Room Lights",
         supported_features: 55,
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T17:00:05.573457+00:00",
       last_updated: "2019-01-22T17:00:05.573457+00:00",
@@ -332,7 +321,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       state: "off",
       attributes: {
         friendly_name: "Home Security Arm",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T19:29:19.871240+00:00",
       last_updated: "2019-01-22T19:29:19.871240+00:00",
@@ -344,7 +332,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       attributes: {
         friendly_name: "Kitchen lights",
         supported_features: 1,
-        homebridge_hidden: false,
         emulated_hue_hidden: false,
         emulated_hue_name: "Kitchen lights",
       },
@@ -354,13 +341,12 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
     },
     "light.hue_color_lamp_1": {
       entity_id: "light.hue_color_lamp_1",
-      state: "off",
+      state: "on",
       attributes: {
         min_mireds: 153,
         max_mireds: 500,
-        friendly_name: "Master 1",
+        friendly_name: localize("ui.panel.page-demo.config.arsaboo.names.left"),
         supported_features: 63,
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T16:59:57.421788+00:00",
       last_updated: "2019-01-22T16:59:57.421788+00:00",
@@ -372,9 +358,10 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       attributes: {
         min_mireds: 153,
         max_mireds: 500,
-        friendly_name: "Master 2",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.names.right"
+        ),
         supported_features: 63,
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T16:59:57.422442+00:00",
       last_updated: "2019-01-22T16:59:57.422442+00:00",
@@ -382,13 +369,14 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
     },
     "light.hue_color_lamp_3": {
       entity_id: "light.hue_color_lamp_3",
-      state: "off",
+      state: "on",
       attributes: {
         min_mireds: 153,
         max_mireds: 500,
-        friendly_name: "Master 3",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.names.mirror"
+        ),
         supported_features: 63,
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T16:59:57.423068+00:00",
       last_updated: "2019-01-22T16:59:57.423068+00:00",
@@ -400,7 +388,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       attributes: {
         unit_of_measurement: "Watching",
         friendly_name: "PlexSpy",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T17:00:00.185247+00:00",
       last_updated: "2019-01-22T17:00:00.185247+00:00",
@@ -416,7 +403,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         timezone: "America/New_York",
         friendly_name: "Front Door Ding",
         device_class: "occupancy",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T17:00:03.255653+00:00",
       last_updated: "2019-01-22T18:24:03.677589+00:00",
@@ -439,7 +425,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         category: "motion",
         friendly_name: "Front Door Last Motion",
         icon: "hademo:history",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T18:22:33.829681+00:00",
       last_updated: "2019-01-22T18:23:04.162733+00:00",
@@ -513,9 +498,10 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       entity_id: "light.gateway_light_34ce00813670",
       state: "off",
       attributes: {
-        friendly_name: "Gateway light",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.names.hallway"
+        ),
         supported_features: 17,
-        homebridge_hidden: true,
         emulated_hue_hidden: false,
       },
       last_changed: "2019-01-22T17:00:03.343398+00:00",
@@ -534,7 +520,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         cellular_backup: false,
         friendly_name: "Abode Alarm",
         icon: "hademo:security",
-        homebridge_hidden: false,
         entity_picture: "/assets/arsaboo/icons/Abode.jpg",
       },
       last_changed: "2019-01-22T19:29:19.864324+00:00",
@@ -551,7 +536,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         timezone: "America/New_York",
         friendly_name: "Front Door Motion",
         device_class: "motion",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T18:24:14.683620+00:00",
       last_updated: "2019-01-22T18:24:14.683620+00:00",
@@ -565,7 +549,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         battery_level: 43,
         friendly_name: "Living Room Occupancy",
         device_class: "motion",
-        homebridge_hidden: false,
       },
       last_changed: "2019-01-22T19:36:42.441431+00:00",
       last_updated: "2019-01-22T19:36:42.441431+00:00",
@@ -579,7 +562,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         battery_level: 45,
         friendly_name: "Garage Entry Door",
         device_class: "door",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T19:31:03.412180+00:00",
       last_updated: "2019-01-22T19:31:03.412180+00:00",
@@ -593,7 +575,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         battery_level: 49,
         friendly_name: "Guest Room Occupancy",
         device_class: "motion",
-        homebridge_hidden: false,
       },
       last_changed: "2019-01-22T17:00:03.630369+00:00",
       last_updated: "2019-01-22T17:00:03.630369+00:00",
@@ -606,7 +587,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         battery_level: 41,
         friendly_name: "Laundry Water Leak",
         device_class: "moisture",
-        homebridge_hidden: false,
       },
       last_changed: "2019-01-22T17:00:03.632708+00:00",
       last_updated: "2019-01-22T17:00:03.632708+00:00",
@@ -620,7 +600,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         battery_level: 43,
         friendly_name: "Master Occupancy",
         device_class: "motion",
-        homebridge_hidden: false,
       },
       last_changed: "2019-01-22T17:00:03.635223+00:00",
       last_updated: "2019-01-22T17:00:03.635223+00:00",
@@ -634,7 +613,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         battery_level: 41,
         friendly_name: "Upstairs Occupancy",
         device_class: "motion",
-        homebridge_hidden: false,
       },
       last_changed: "2019-01-22T17:00:03.636514+00:00",
       last_updated: "2019-01-22T17:00:03.636514+00:00",
@@ -651,7 +629,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         device_type: "Door Contact",
         friendly_name: "Front Door",
         device_class: "door",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T19:31:27.023892+00:00",
       last_updated: "2019-01-22T19:31:27.023892+00:00",
@@ -668,7 +645,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         device_type: "Door Contact",
         friendly_name: "Back Door",
         device_class: "door",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T17:00:03.642051+00:00",
       last_updated: "2019-01-22T17:00:03.642051+00:00",
@@ -681,12 +657,15 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         volume_level: 0.18,
         is_volume_muted: false,
         media_content_type: "music",
-        media_duration: 155,
+        media_duration: 300,
         media_position: 0,
-        media_position_updated_at: "2019-05-09T16:21:57.112Z",
+        media_position_updated_at: new Date(
-        media_title: "Ek Ladki Ko Dekha Toh Aisa Laga - Title Track",
+          // 23 seconds in
-        media_artist: "Rochak Kohli",
+          new Date().getTime() - 23000
-        media_album_name: "Ek Ladki Ko Dekha Toh Aisa Laga",
+        ).toISOString(),
+        media_title: "I Wasn't Born To Follow",
+        media_artist: "The Byrds",
+        media_album_name: "The Notorious Byrd Brothers",
         source_list: [
           "Bollywood Hindi Hits",
           "Bollywood Radio and Beyond",
@@ -704,11 +683,12 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         sonos_group: ["media_player.family_room_2"],
         night_sound: false,
         speech_enhance: false,
-        friendly_name: "Family Room",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.names.family_room"
+        ),
         entity_picture:
           "/api/media_player_proxy/media_player.family_room_2?token=be41a86e2a360761d67c36a010b09654b730deec092016ee92aafef79b1978ff&cache=e03d22fb103202e7",
         supported_features: 64063,
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T17:00:04.802095+00:00",
       last_updated: "2019-01-22T17:00:04.802095+00:00",
@@ -731,7 +711,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         category: "ding",
         friendly_name: "Front Door Last Ding",
         icon: "hademo:history",
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T17:00:04.444969+00:00",
       last_updated: "2019-01-22T17:00:04.444969+00:00",
@@ -745,7 +724,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         max_mireds: 400,
         friendly_name: "LifxnrKitchen",
         supported_features: 55,
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T17:00:05.570989+00:00",
       last_updated: "2019-01-22T17:00:05.570989+00:00",
@@ -759,7 +737,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         max_mireds: 400,
         friendly_name: "Garage lights",
         supported_features: 55,
-        homebridge_hidden: false,
         emulated_hue_hidden: false,
         emulated_hue_name: "Garage Lights",
       },
@@ -773,9 +750,10 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       attributes: {
         min_mireds: 111,
         max_mireds: 400,
-        friendly_name: "LifxnrGuest",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.names.patio"
+        ),
         supported_features: 55,
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T17:00:05.587119+00:00",
       last_updated: "2019-01-22T17:00:05.587119+00:00",
@@ -787,9 +765,10 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       attributes: {
         min_mireds: 111,
         max_mireds: 400,
-        friendly_name: "Lifx3",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.names.kitchen"
+        ),
         supported_features: 55,
-        homebridge_hidden: true,
       },
       last_changed: "2019-01-22T17:00:05.587973+00:00",
       last_updated: "2019-01-22T17:00:05.587973+00:00",
@@ -803,7 +782,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         unit_of_measurement: "lx",
         friendly_name: "Master Brightness",
         device_class: "illuminance",
-        homebridge_hidden: true,
         icon: "hademo:brightness-7",
       },
       last_changed: "2019-01-22T19:34:01.373772+00:00",
@@ -823,8 +801,9 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         duration: "44 mins",
         distance: "34.3 mi",
         unit_of_measurement: "min",
-        friendly_name: "Commute to Home",
+        friendly_name: localize(
-        homebridge_hidden: true,
+          "ui.panel.page-demo.config.arsaboo.labels.commute_home"
+        ),
         icon: "hademo:car",
       },
       last_changed: "2019-01-22T17:00:15.963892+00:00",
@@ -844,8 +823,9 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
         duration: "37 mins",
         distance: "30.2 mi",
         unit_of_measurement: "min",
-        friendly_name: "Morning Commute",
+        friendly_name: localize(
-        homebridge_hidden: true,
+          "ui.panel.page-demo.config.arsaboo.labels.morning_commute"
+        ),
         icon: "hademo:car",
       },
       last_changed: "2019-01-22T17:00:16.142799+00:00",
@@ -855,33 +835,18 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
     "switch.wemoswitch": {
       entity_id: "switch.wemoswitch",
       state: "on",
-      attributes: { friendly_name: "WeMoSwitch", homebridge_hidden: true },
+      attributes: {
+        friendly_name: localize("ui.panel.page-demo.config.arsaboo.labels.air"),
+      },
       last_changed: "2019-01-22T17:00:22.455617+00:00",
       last_updated: "2019-01-22T17:00:22.455617+00:00",
       context: { id: "d5ddc6e4c88f436ab372934934c8675e", user_id: null },
     },
-    "switch.wemoinsight": {
-      entity_id: "switch.wemoinsight",
-      state: "off",
-      attributes: {
-        state_detail: "off",
-        on_latest_time: "00d 00h 00m 17s",
-        on_today_time: "00d 00h 00m 00s",
-        on_total_time: "00d 21h 49m 35s",
-        power_threshold_w: 2,
-        friendly_name: "WeMoInsight",
-        homebridge_hidden: true,
-      },
-      last_changed: "2019-01-22T17:00:22.397783+00:00",
-      last_updated: "2019-01-22T17:00:22.492778+00:00",
-      context: { id: "1ff8d42d21084350acbdb6002551fc61", user_id: null },
-    },
     "switch.driveway": {
       entity_id: "switch.driveway",
       state: "off",
       attributes: {
         friendly_name: "Driveway Light",
-        homebridge_hidden: false,
         templates: {
           icon_color:
             "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
@@ -900,7 +865,6 @@ export const demoEntitiesArsaboo: () => Entity[] = () =>
       state: "off",
       attributes: {
         friendly_name: "Porch Lights",
-        homebridge_hidden: false,
         templates: {
           icon_color:
             "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",

demo/src/configs/arsaboo/lovelace.ts

@@ -1,6 +1,6 @@
-import { LovelaceConfig } from "../../../../src/data/lovelace";
+import { DemoConfig } from "../types";
 
-export const demoLovelaceArsaboo: () => LovelaceConfig = () => ({
+export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
   title: "Home Assistant",
   views: [
     {
@@ -483,15 +483,11 @@ export const demoLovelaceArsaboo: () => LovelaceConfig = () => ({
           type: "media-control",
           entity: "media_player.family_room_2",
         },
-        {
-          type: "iframe",
-          aspect_ratio: "90%",
-          url:
-            "https://embed.windy.com/embed2.html?zoom=5&level=surface&overlay=rain&menu=&message=&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=32.487&detailLon=--84.023&metricWind=default&metricTemp=default&radarRange=-1",
-        },
         {
           type: "entities",
-          title: "Information",
+          title: localize(
+            "ui.panel.page-demo.config.arsaboo.labels.information"
+          ),
           show_header_toggle: false,
           entities: [
             "sensor.morning_commute",
@@ -502,52 +498,34 @@ export const demoLovelaceArsaboo: () => LovelaceConfig = () => ({
         },
         {
           type: "entities",
-          title: "Lights",
+          title: localize("ui.panel.page-demo.config.arsaboo.labels.lights"),
           entities: [
             {
               entity: "light.gateway_light_34ce00813670",
-              // type: "custom:slider-entity-row",
             },
             {
               entity: "light.lifx3",
-              // type: "custom:slider-entity-row",
             },
             {
               entity: "light.lifxnrguest",
-              // type: "custom:slider-entity-row",
             },
             {
-              entity: "light.lifxnrkitchen",
+              type: "section",
-              // type: "custom:slider-entity-row",
+              label: localize(
-            },
+                "ui.panel.page-demo.config.arsaboo.names.master_bedroom"
-            {
+              ),
-              type: "divider",
             },
             {
               entity: "light.hue_color_lamp_1",
-              // type: "custom:slider-entity-row",
             },
             {
               entity: "light.hue_color_lamp_2",
-              // type: "custom:slider-entity-row",
             },
             {
               entity: "light.hue_color_lamp_3",
-              // type: "custom:slider-entity-row",
             },
-          ],
-        },
-        {
-          type: "entities",
-          title: "Switches",
-          entities: [
             {
               entity: "switch.wemoswitch",
-              secondary_info: "last-changed",
-            },
-            {
-              entity: "switch.wemoinsight",
-              secondary_info: "last-changed",
             },
           ],
         },
@@ -560,7 +538,9 @@ export const demoLovelaceArsaboo: () => LovelaceConfig = () => ({
         },
         {
           type: "entities",
-          title: "Entertainment",
+          title: localize(
+            "ui.panel.page-demo.config.arsaboo.labels.entertainment"
+          ),
           show_header_toggle: false,
           entities: [
             "sensor.living_room",
@@ -569,7 +549,6 @@ export const demoLovelaceArsaboo: () => LovelaceConfig = () => ({
             "input_select.hdmiinput",
             "input_number.harmonyvolume",
             "sensor.total_tv_time",
-            "sensor.sonos_audio_in",
             "script.tv_off",
           ],
         },

demo/src/configs/demo-configs.ts

@@ -25,7 +25,7 @@ export const setDemoConfig = async (
   selectedDemoConfigIndex = index;
   selectedDemoConfig = confProm;
 
-  hass.addEntities(config.entities(), true);
+  hass.addEntities(config.entities(hass.localize), true);
-  lovelace.saveConfig(config.lovelace());
+  lovelace.saveConfig(config.lovelace(hass.localize));
   hass.mockTheme(config.theme());
 };

demo/src/configs/jimpower/entities.ts

@@ -1,6 +1,7 @@
-import { Entity, convertEntities } from "../../../../src/fake_data/entity";
+import { convertEntities } from "../../../../src/fake_data/entity";
+import { DemoConfig } from "../types";
 
-export const demoEntitiesJimpower: () => Entity[] = () =>
+export const demoEntitiesJimpower: DemoConfig["entities"] = () =>
   convertEntities({
     "zone.powertec": {
       entity_id: "zone.powertec",

demo/src/configs/jimpower/lovelace.ts

@@ -1,7 +1,7 @@
-import { LovelaceConfig } from "../../../../src/data/lovelace";
 import "../../custom-cards/card-modder";
+import { DemoConfig } from "../types";
 
-export const demoLovelaceJimpower: () => LovelaceConfig = () => ({
+export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
   name: "Kingia Castle",
   resources: [
     // {

demo/src/configs/kernehed/entities.ts

@@ -1,6 +1,7 @@
-import { Entity, convertEntities } from "../../../../src/fake_data/entity";
+import { convertEntities } from "../../../../src/fake_data/entity";
+import { DemoConfig } from "../types";
 
-export const demoEntitiesKernehed: () => Entity[] = () =>
+export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
   convertEntities({
     "zone.anna": {
       entity_id: "zone.anna",

demo/src/configs/kernehed/lovelace.ts

@@ -1,6 +1,6 @@
-import { LovelaceConfig } from "../../../../src/data/lovelace";
+import { DemoConfig } from "../types";
 
-export const demoLovelaceKernehed: () => LovelaceConfig = () => ({
+export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
   name: "Hem",
   resources: [
     // {

demo/src/configs/teachingbirds/entities.ts

@@ -1,6 +1,7 @@
-import { Entity, convertEntities } from "../../../../src/fake_data/entity";
+import { convertEntities } from "../../../../src/fake_data/entity";
+import { DemoConfig } from "../types";
 
-export const demoEntitiesTeachingbirds: () => Entity[] = () =>
+export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
   convertEntities({
     "sensor.pollen_grabo": {
       entity_id: "sensor.pollen_grabo",

demo/src/configs/teachingbirds/lovelace.ts

@@ -1,29 +1,7 @@
-import { LovelaceConfig } from "../../../../src/data/lovelace";
+import { DemoConfig } from "../types";
 
-export const demoLovelaceTeachingbirds: () => LovelaceConfig = () => ({
+export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
   title: "Home",
-  resources: [
-    // {
-    //   url: "/local/lovelace/mini-media-player.js?v=0.6",
-    //   type: "module",
-    // },
-    // {
-    //   url: "/local/lovelace/slider-entity-row.js?v=d6da75",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/lovelace/monster-card.js?v=0.2.3",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/lovelace/tracker-card.js?v=0.1.5",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/lovelace/home-setter.js?v=0.0.1",
-    //   type: "js",
-    // },
-  ],
   views: [
     {
       cards: [
@@ -1201,484 +1179,5 @@ export const demoLovelaceTeachingbirds: () => LovelaceConfig = () => ({
       title: "Info",
       icon: "mdi:lan",
     },
-    // {
-    //   cards: [
-    //     {
-    //       cards: [
-    //         {
-    //           entities: [
-    //             "switch.dafang_night_mode",
-    //             "light.isa_ceiling_light",
-    //             "switch.dafang_h264_rtsp_server",
-    //           ],
-    //           camera_image: "camera.upstairs",
-    //           type: "picture-glance",
-    //           title: "Upstairs",
-    //         },
-    //         {
-    //           entities: [
-    //             {
-    //               tap_action: {
-    //                 action: "call-service",
-    //                 service: "script.dafang_down",
-    //               },
-    //               entity: "script.dafang_down",
-    //             },
-    //             {
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               entity: "script.dafang_up",
-    //             },
-    //             {
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               entity: "script.dafang_left",
-    //             },
-    //             {
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               entity: "script.dafang_right",
-    //             },
-    //             {
-    //               entity: "script.dafang_calibrate",
-    //               hold_action: {
-    //                 action: "toggle",
-    //               },
-    //               tap_action: {
-    //                 action: "none",
-    //               },
-    //               icon: "mdi:reload",
-    //             },
-    //           ],
-    //           show_name: false,
-    //           type: "glance",
-    //           show_state: false,
-    //         },
-    //         {
-    //           type: "picture-entity",
-    //           entity: "camera.motion_dafang",
-    //         },
-    //       ],
-    //       type: "vertical-stack",
-    //     },
-    //     {
-    //       cards: [
-    //         {
-    //           entities: [
-    //             "light.living_room_ceiling_light_level",
-    //             "light.living_room_spotlights_level",
-    //           ],
-    //           camera_image: "camera.back_door",
-    //           type: "picture-glance",
-    //           title: "Back door",
-    //         },
-    //         {
-    //           entities: [
-    //             {
-    //               entity: "script.sannce_down",
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               icon: "mdi:chevron-down",
-    //             },
-    //             {
-    //               entity: "script.sannce_up",
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               icon: "mdi:chevron-up",
-    //             },
-    //             {
-    //               entity: "script.sannce_left",
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               icon: "mdi:chevron-left",
-    //             },
-    //             {
-    //               entity: "script.sannce_right",
-    //               tap_action: {
-    //                 action: "toggle",
-    //               },
-    //               icon: "mdi:chevron-right",
-    //             },
-    //             {
-    //               entity: "script.sannce_calibrate",
-    //               hold_action: {
-    //                 action: "toggle",
-    //               },
-    //               tap_action: {
-    //                 action: "none",
-    //               },
-    //               icon: "mdi:reload",
-    //             },
-    //           ],
-    //           show_name: false,
-    //           type: "glance",
-    //           show_state: false,
-    //         },
-    //         {
-    //           type: "picture-entity",
-    //           entity: "camera.motion_sannce",
-    //         },
-    //       ],
-    //       type: "vertical-stack",
-    //     },
-    //     {
-    //       cards: [
-    //         {
-    //           entities: ["sensor.ring_front_door_battery"],
-    //           camera_image: "camera.front_door",
-    //           title: "Latest Motion Front Door",
-    //           show_state: false,
-    //           type: "picture-glance",
-    //           entity: "camera.front_door",
-    //         },
-    //       ],
-    //       type: "vertical-stack",
-    //     },
-    //   ],
-    //   path: "cameras",
-    //   title: "Cameras",
-    //   icon: "mdi:cctv",
-    // },
-    // {
-    //   cards: [
-    //     {
-    //       cards: [
-    //         {
-    //           entities: [
-    //             {
-    //               name: "Road temp",
-    //               entity: "sensor.trafikverket_alta_road_temperature",
-    //             },
-    //             {
-    //               entity: "sensor.homesolna_travel_time",
-    //               name: "Solna",
-    //               icon: "mdi:car",
-    //             },
-    //             {
-    //               entity: "sensor.homec9_travel_time",
-    //               name: "C9",
-    //               icon: "mdi:car",
-    //             },
-    //           ],
-    //           type: "glance",
-    //         },
-    //         {
-    //           cards: [
-    //             {
-    //               entity: "camera.tpl_skvaltan",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //             {
-    //               entity: "camera.tpl_nacka",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //           ],
-    //           type: "horizontal-stack",
-    //         },
-    //         {
-    //           cards: [
-    //             {
-    //               entity: "camera.vikdalen",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //             {
-    //               entity: "camera.tpl_kvarnholmen",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //           ],
-    //           type: "horizontal-stack",
-    //         },
-    //         {
-    //           cards: [
-    //             {
-    //               entity: "camera.marinstaden",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //             {
-    //               entity: "camera.svindersvik",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //           ],
-    //           type: "horizontal-stack",
-    //         },
-    //         {
-    //           cards: [
-    //             {
-    //               entity: "camera.sicklatunneln",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //             {
-    //               entity: "camera.tpl_grondal",
-    //               type: "picture-entity",
-    //               show_state: false,
-    //             },
-    //           ],
-    //           type: "horizontal-stack",
-    //         },
-    //       ],
-    //       type: "vertical-stack",
-    //     },
-    //   ],
-    //   path: "traffic",
-    //   title: "Traffic info",
-    //   icon: "mdi:car",
-    // },
-    // {
-    //   cards: [
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "input_boolean.ad_*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Appdaemon Apps",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.cats*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Cats",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.house*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "House",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.lights*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Lights",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.presence*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Presence",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.security*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Security",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.system*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "System",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.temperature*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Temperature",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "automation.tts*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "TTS",
-    //       },
-    //       show_empty: false,
-    //     },
-    //     {
-    //       filter: {
-    //         include: [
-    //           {
-    //             entity_id: "alert.*",
-    //           },
-    //         ],
-    //       },
-    //       type: "custom:monster-card",
-    //       card: {
-    //         show_header_toggle: false,
-    //         type: "entities",
-    //         title: "Alerts",
-    //       },
-    //       show_empty: false,
-    //     },
-    //   ],
-    //   path: "automations",
-    //   title: "Automations",
-    //   icon: "mdi:flash-auto",
-    // },
-    {
-      cards: [
-        {
-          cards: [
-            {
-              entities: [
-                {
-                  url: "https://www.home-assistant.io/",
-                  type: "weblink",
-                  name: "Home Assistant",
-                  icon: "mdi:home-assistant",
-                },
-                {
-                  url: "https://rc--home-assistant-docs.netlify.com/",
-                  type: "weblink",
-                  name: "Home Assistant Beta",
-                  icon: "mdi:home-assistant",
-                },
-                {
-                  url:
-                    "https://github.com/home-assistant/home-assistant-polymer/releases",
-                  type: "weblink",
-                  name: "Lovelace release notes",
-                  icon: "mdi:home-heart",
-                },
-                {
-                  url: "https://s3.amazonaws.com/hassio-version/stable.json",
-                  type: "weblink",
-                  name: "Hassio build",
-                  icon: "mdi:home-assistant",
-                },
-                {
-                  url:
-                    "https://github.com/dresden-elektronik/deconz-rest-plugin/releases",
-                  type: "weblink",
-                  name: "Deconz release notes",
-                  icon: "mdi:home-assistant",
-                },
-              ],
-              show_header_toggle: false,
-              type: "entities",
-              title: "Links",
-            },
-          ],
-          type: "vertical-stack",
-        },
-        // {
-        //   cards: [
-        //     {
-        //       type: "custom:home-setter",
-        //       pages: [
-        //         {
-        //           path: "lovelace/home",
-        //           name: "Default",
-        //         },
-        //         {
-        //           path: "lovelace/dashboard",
-        //           name: "Dashboard",
-        //         },
-        //       ],
-        //     },
-        //     {
-        //       title: null,
-        //       type: "custom:tracker-card",
-        //       trackers: [
-        //         "sensor.custom_card_tracker",
-        //         "sensor.custom_component_tracker",
-        //       ],
-        //     },
-        //   ],
-        //   type: "vertical-stack",
-        // },
-      ],
-      path: "settings",
-      title: "Settings",
-      icon: "mdi:cogs",
-    },
   ],
 });

demo/src/configs/types.ts

@@ -1,12 +1,13 @@
 import { LovelaceConfig } from "../../../src/data/lovelace";
 import { Entity } from "../../../src/fake_data/entity";
+import { LocalizeFunc } from "../../../src/common/translations/localize";
 
 export interface DemoConfig {
   index?: number;
   name: string;
   authorName: string;
   authorUrl: string;
-  lovelace: () => LovelaceConfig;
+  lovelace: (localize: LocalizeFunc) => LovelaceConfig;
-  entities: () => Entity[];
+  entities: (localize: LocalizeFunc) => Entity[];
   theme: () => { [key: string]: string } | null;
 }

demo/src/custom-cards/ha-demo-card.ts

@@ -21,8 +21,9 @@ import {
 
 export class HADemoCard extends LitElement implements LovelaceCard {
   public lovelace?: Lovelace;
-  public hass?: MockHomeAssistant;
+  public hass!: MockHomeAssistant;
   private _switching?: boolean;
+  private _hidden = localStorage.hide_demo_card;
 
   static get properties(): PropertyDeclarations {
     return {
@@ -33,7 +34,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
   }
 
   public getCardSize() {
-    return 2;
+    return this._hidden ? 0 : 2;
   }
 
   public setConfig(
@@ -43,6 +44,9 @@ export class HADemoCard extends LitElement implements LovelaceCard {
   ) {}
 
   protected render() {
+    if (this._hidden) {
+      return;
+    }
     return html`
       <ha-card>
         <div class="picker">
@@ -56,9 +60,12 @@ export class HADemoCard extends LitElement implements LovelaceCard {
                     (conf) => html`
                       ${conf.name}
                       <small>
-                        by
                         <a target="_blank" href="${conf.authorUrl}">
-                          ${conf.authorName}
+                          ${this.hass.localize(
+                            "ui.panel.page-demo.cards.demo.demo_by",
+                            "name",
+                            conf.authorName
+                          )}
                         </a>
                       </small>
                     `
@@ -67,22 +74,30 @@ export class HADemoCard extends LitElement implements LovelaceCard {
                 )}
           </div>
           <mwc-button @click=${this._nextConfig} .disabled=${this._switching}>
-            Next demo
+            ${this.hass.localize("ui.panel.page-demo.cards.demo.next_demo")}
           </mwc-button>
         </div>
         <div class="content small-hidden">
-          Welcome home! You've reached the Home Assistant demo where we showcase
+          ${this.hass.localize("ui.panel.page-demo.cards.demo.introduction")}
-          the best UIs created by our community.
         </div>
         <div class="actions small-hidden">
           <a href="https://www.home-assistant.io" target="_blank">
-            <mwc-button>Learn more about Home Assistant</mwc-button>
+            <mwc-button>
+              ${this.hass.localize("ui.panel.page-demo.cards.demo.learn_more")}
+            </mwc-button>
           </a>
         </div>
       </ha-card>
     `;
   }
 
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    if (this._hidden) {
+      this.style.display = "none";
+    }
+  }
+
   private _nextConfig() {
     this._updateConfig(
       selectedDemoConfigIndex < demoConfigs.length - 1
@@ -94,7 +109,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
   private async _updateConfig(index: number) {
     this._switching = true;
     try {
-      await setDemoConfig(this.hass!, this.lovelace!, index);
+      await setDemoConfig(this.hass, this.lovelace!, index);
     } catch (err) {
       alert("Failed to switch config :-(");
     } finally {

demo/src/ha-demo.ts

@@ -27,7 +27,13 @@ class HaDemo extends HomeAssistantAppEl {
     };
 
     const hass = (this.hass = provideHass(this, initial));
-    mockLovelace(hass);
+    const localizePromise =
+      // @ts-ignore
+      this._loadFragmentTranslations(hass.language, "page-demo").then(
+        () => this.hass!.localize
+      );
+
+    mockLovelace(hass, localizePromise);
     mockAuth(hass);
     mockTranslations(hass);
     mockHistory(hass);
@@ -37,12 +43,16 @@ class HaDemo extends HomeAssistantAppEl {
     mockEvents(hass);
     mockMediaPlayer(hass);
     mockFrontend(hass);
-    selectedDemoConfig.then((conf) => {
+
-      hass.addEntities(conf.entities());
+    // Once config is loaded AND localize, set entities and apply theme.
-      if (conf.theme) {
+    Promise.all([selectedDemoConfig, localizePromise]).then(
-        hass.mockTheme(conf.theme());
+      ([conf, localize]) => {
+        hass.addEntities(conf.entities(localize));
+        if (conf.theme) {
+          hass.mockTheme(conf.theme());
+        }
       }
-    });
+    );
 
     // Taken from polymer/pwa-helpers. BSD-3 licensed
     document.body.addEventListener(

demo/src/stubs/lovelace.ts

@@ -4,12 +4,16 @@ import "../custom-cards/ha-demo-card";
 import { HADemoCard } from "../custom-cards/ha-demo-card";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { selectedDemoConfig } from "../configs/demo-configs";
+import { LocalizeFunc } from "../../../src/common/translations/localize";
 
-export const mockLovelace = (hass: MockHomeAssistant) => {
+export const mockLovelace = (
-  selectedDemoConfig.then((config) => hass.addEntities(config.entities()));
+  hass: MockHomeAssistant,
-
+  localizePromise: Promise<LocalizeFunc>
+) => {
   hass.mockWS("lovelace/config", () =>
-    selectedDemoConfig.then((config) => config.lovelace())
+    Promise.all([selectedDemoConfig, localizePromise]).then(
+      ([config, localize]) => config.lovelace(localize)
+    )
   );
 
   hass.mockWS("lovelace/config/save", () => Promise.resolve());

src/state/translations-mixin.ts

@@ -19,6 +19,9 @@ import { getHassTranslations } from "../data/translation";
 
 export default (superClass: Constructor<LitElement & HassBaseEl>) =>
   class extends superClass {
+    // tslint:disable-next-line: variable-name
+    private __coreProgress?: string;
+
     protected firstUpdated(changedProps) {
       super.firstUpdated(changedProps);
       this.addEventListener("hass-language-select", (e) =>
@@ -97,8 +100,18 @@ export default (superClass: Constructor<LitElement & HassBaseEl>) =>
     }
 
     private async _loadCoreTranslations(language: string) {
-      const result = await getTranslation(null, language);
+      // Check if already in progress
-      this._updateResources(result.language, result.data);
+      // Necessary as we call this in firstUpdated and hassConnected
+      if (this.__coreProgress === language) {
+        return;
+      }
+      this.__coreProgress = language;
+      try {
+        const result = await getTranslation(null, language);
+        this._updateResources(result.language, result.data);
+      } finally {
+        this.__coreProgress = undefined;
+      }
     }
 
     private _updateResources(language: string, data: any) {

src/translations/en.json

@@ -1184,6 +1184,49 @@
           }
         }
       },
+      "page-demo": {
+        "cards": {
+          "demo": {
+            "demo_by": "by {name}",
+            "next_demo": "Next demo",
+            "introduction": "Welcome home! You've reached the Home Assistant demo where we showcase the best UIs created by our community.",
+            "learn_more": "Learn more about Home Assistant"
+          }
+        },
+        "config": {
+          "arsaboo": {
+            "names": {
+              "upstairs": "Upstairs",
+              "family_room": "Family Room",
+              "kitchen": "Kitchen",
+              "patio": "Patio",
+              "hallway": "Hallway",
+              "master_bedroom": "Master Bedroom",
+              "left": "Left",
+              "right": "Right",
+              "mirror": "Mirror"
+            },
+            "labels": {
+              "lights": "Lights",
+              "information": "Information",
+              "morning_commute": "Morning Commute",
+              "commute_home": "Commute to Home",
+              "entertainment": "Entertainment",
+              "activity": "Activity",
+              "hdmi_input": "HDMI Input",
+              "hdmi_switcher": "HDMI Switcher",
+              "volume": "Volume",
+              "total_tv_time": "Total TV Time",
+              "turn_tv_off": "Turn Television off",
+              "air": "Air"
+            },
+            "unit": {
+              "watching": "watching",
+              "minutes_abbr": "min"
+            }
+          }
+        }
+      },
       "page-onboarding": {
         "intro": "Are you ready to awaken your home, reclaim your privacy and join a worldwide community of tinkerers?",
         "user": {