Polish: Add Placeholder ui for a State "Unavailable" (#37)

Currently we don't handle "VPN Client unavailable" not really. We
envision the that the extension should start the client using the native
messaging app. So i would suggest we should have a "we're loading
things" ui to represent this.



https://github.com/user-attachments/assets/093a04cc-5438-4d71-9cfa-9003d7ed01ce

src/components/vpncard.js

@@ -226,3 +226,117 @@ export class VPNCard extends LitElement {
   `;
 }
 customElements.define("vpn-card", VPNCard);
+
+/**
+ * This is a "Dummy Card" that shows a loading animation.
+ */
+export class VPNCardPlaceHolder extends LitElement {
+  render() {
+    return html`
+      <main class="box">
+        <div style="filter:grayscale();">
+          <div class="" style="position:relative;">
+            <span class="placeholder placeholderimg"></span>
+            <img
+              src="../../assets/img/shield-off.svg"
+              style="mix-blend-mode: difference;"
+            />
+          </div>
+        </div>
+        <div class="infobox">
+          <h1 class="placeholder">Loading</h1>
+          <p class="placeholder">Loading</p>
+        </div>
+        <button class="pill placeholder"></button>
+      </main>
+    `;
+  }
+
+  static styles = css`
+    main {
+      padding: var(--padding-default);
+      display: flex;
+    }
+    * {
+      color: var(--text-color-primary);
+      font-family: var(--font-family);
+    }
+    :host {
+      font-size: 1rem;
+      font-family: var(--font-family);
+      --default-padding: 16px;
+    }
+    .placeholderimg {
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: absolute;
+      top: 0;
+      z-index: 10;
+      mix-blend-mode: initial;
+      border-radius: 30px;
+    }
+    .box {
+      border-radius: 8px;
+      background: lch(from var(--panel-bg-color) calc(l + 5) c h);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-direction: row;
+    }
+    .infobox {
+      flex: 4;
+      padding: 0px 10px;
+    }
+    img {
+      margin-right: var(--default-padding);
+      position: relative;
+    }
+
+    h1,
+    p {
+      color: transparent;
+      border-radius: 5px;
+    }
+    h1 {
+      font-size: 18px;
+      line-height: 20px;
+      font-weight: 700;
+    }
+    p {
+      font-size: 14px;
+      line-height: 21px;
+      font-weight: 400;
+      opacity: 0.7;
+    }
+    .pill {
+      width: 45px;
+      height: 24px;
+      border-radius: 30px;
+      border: none;
+      background: #6d6d6e;
+      position: relative;
+    }
+
+    .placeholder {
+      background: linear-gradient(
+        90deg,
+        rgba(105, 105, 105, 1) 20%,
+        rgba(255, 255, 255, 1) 48%,
+        rgba(105, 105, 105, 1) 80%
+      );
+      background-size: 800% 100%;
+      animation: gradient-animation 0.6s infinite;
+    }
+
+    @keyframes gradient-animation {
+      0% {
+        background-position: 0% 0%;
+      }
+      100% {
+        background-position: 100% 0%;
+      }
+    }
+  `;
+}
+customElements.define("vpn-card-placeholder", VPNCardPlaceHolder);

src/ui/browserAction/popupPage.js

@@ -57,6 +57,8 @@ export class BrowserActionPopup extends LitElement {
     this.updatePage();
   }
   updatePage() {
+    /** @type {VPNState} */
+    this.vpnState = null;
     Utils.getCurrentTab().then(async (tab) => {
       if (!Utils.isValidForProxySetting(tab.url)) {
         this.pageURL = null;
@@ -110,22 +112,26 @@ export class BrowserActionPopup extends LitElement {
     let title = this.stackView?.value?.currentElement?.dataset?.title;
     title ??= tr("productName");
 
+    let card = html`
+      <vpn-card
+        .enabled=${this.vpnState?.connected}
+        .cityName=${this.vpnState?.exitServerCity?.name}
+        .countryFlag=${this.vpnState?.exitServerCountry?.code}
+        .connectedSince=${this.vpnState?.connectedSince}
+      ></vpn-card>
+    `;
+    if (!this.vpnState.alive) {
+      card = html`<vpn-card-placeholder></vpn-card-placeholder>`;
+    }
+
     return html`
       <vpn-titlebar title="${title}" ${ref(this.titleBar)}>
         ${canGoBack ? BrowserActionPopup.backBtn(back) : null}
         <img slot="right" src="../../assets/img/settings-cog.svg" />
       </vpn-titlebar>
       <stack-view ${ref(this.stackView)}>
-        <section data-title="${tr("productName")}">
-          <main>
-            <vpn-card
-              .enabled=${this.vpnState?.connected}
-              .cityName=${this.vpnState?.exitServerCity?.name}
-              .countryFlag=${this.vpnState?.exitServerCountry?.code}
-              .connectedSince=${this.vpnState?.connectedSince}
-            ></vpn-card>
-            ${this.locationSettings()}
-          </main>
+        <section data-title="Mozilla VPN">
+          <main>${card} ${this.locationSettings()}</main>
         </section>
       </stack-view>
     `;