Polish: Add ui for a Placeholder State

src/components/vpncard.js

@@ -250,3 +250,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

@@ -51,6 +51,8 @@ export class BrowserActionPopup extends LitElement {
  super();
  this.pageURL = null;
  this._siteContext = null;
+ /** @type {VPNState} */
+ this.vpnState = null;
  Utils.getCurrentTab().then(async (tab) => {
  if (!Utils.isValidForProxySetting(tab.url)) {
  return;
@@ -102,21 +104,25 @@ export class BrowserActionPopup extends LitElement {
  let title = this.stackView?.value?.currentElement?.dataset?.title;
  title ??= "Mozilla VPN";
 
+ let card = html`
+ <vpn-card
+ .enabled=${this.vpnState?.connected}
+ .cityName=${this.vpnState?.exitServerCity?.name}
+ .countryFlag=${this.vpnState?.exitServerCountry?.code}
+ ></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="Mozilla VPN">
- <main>
- <vpn-card
- .enabled=${this.vpnState?.connected}
- .cityName=${this.vpnState?.exitServerCity?.name}
- .countryFlag=${this.vpnState?.exitServerCountry?.code}
- ></vpn-card>
- ${this.locationSettings()}
- </main>
+ <main>${card} ${this.locationSettings()}</main>
  </section>
  </stack-view>
  `;