How to use the lit-html/directives/until.js.until function in lit-html

render() {
    return html`
      
        <h1>Countries</h1>
        <p>This page will show events per country.</p>
        <div style="margin: 5px 0">
          <input placeholder="Search countries.." style="font-size: 1.5rem; padding: 5px;" type="text">
        </div>
        ${until(
          this.fetching.then(() =&gt; {
            const content = this.countries
              .map(c =&gt; c.name.common)
              .filter(
                c =&gt; c.toLowerCase().indexOf(this.query.toLowerCase()) &gt; -1
              )
              .sort()
              .map(c =&gt; {
                return html`
                  
                    
                      <a href="#!events/${c.toLowerCase()}">${c}</a>
                    
                  
                `;
              });

protected render() {
    const { name } = this;

    if (name && this.lastName !== name) {
      this.lastName = name;
      this.whenDefined = customElements.whenDefined(name);
    }

    return html`
      ${until(this.renderDemoLayout(this.whenDefined), this.renderWarning())}
    `;
  }
}

<div class="tag flex tap"> this._showItems()}&gt;

                    

                    <div>${$l("{0} Items", items.size.toString())}</div>

                </div>

                <div class="tag flex tap"> app.syncVault(vault)}&gt;

                    

                    <div>${until(formatDateFromNow(vault.revision.date))}</div>

                </div>

            

            <h2 class="animate">
                ${$l("Invites")}
            </h2>

            <ul>

            ${invites.map(inv =&gt; {
                const status = inv.expired
                    ? { icon: "time", class: "warning", text: $l("expired") }
                    : inv.accepted
                        ? { icon: "check", class: "highlight", text: $l("accepted") }</ul>

protected render() {
    const { src } = this;

    if (src && this.lastSrc !== src) {
      this.lastSrc = src;
      this.jsonFetched = fetchJson(src);
    }

    return html`
      ${until(this.renderDocs(this.jsonFetched, this.section, this.selected))}
    `;
  }

protected render() {
    const { src } = this;

    if (src && this.lastSrc !== src) {
      this.lastSrc = src;
      this.jsonFetched = fetchJson(src);
    }

    return html`
      ${until(renderDocs(this.jsonFetched, this.section, this.selected))}
    `;
  }

>
                                `;
                              })
                          }
                        
                      
                    
                  `;
                })
              }
            `
          }"
        >
        <h3>Events:</h3>
        ${
          until(
            this.fetching.then(
              () =&gt; {
                return html`

const players = (ele) => ele._ids.map((id, i) => html`
<figure>
  
  <figcaption><p>${until(caption(id), `Loading...`)}</p><p id="errors${i}" class="errors"></p></figcaption>
</figure>`);

<h4>${$l("Attachments")}</h4>

                    ${attachments.map(
                        a =&gt; html`
                             this._deleteAttachment(a)}
                            &gt;
                            
                        `
                    )}
                

                <div hidden="" class="updated">
                    ${until(formatDateFromNow(updated!))}
                    ${updatedByMember &amp;&amp; " " + $l("by {0}", updatedByMember.email)}
                </div>
            

            <div class="fabs">
                 this._deleteItem()}&gt; 

                 this._addAttachment()}&gt; 

                 this._addField()}&gt; 

                <div class="flex"></div>

                 this.save()}&gt; 
            </div>

<img style="width: 55px;vertical-align: middle;" src="/src/logo-GDG.svg">
          GDG
        
        <p>
          This is the list of GDG that has organized the most events. I think it
          is interesting and I created this list so that anyone can look at
          other active GDG's and get inspired by what kind of events that they
          are running. So it is not a competetion about how can create the most
          events 😄
        </p>
        <p>
          ${
            until(
              this.fetching.then(f =&gt; {
                const total =
                  this.sortBy === "all"
                    ? this.active.reduce((cur, i) =&gt; cur + i.all, 0)
                    : this.sortBy === "yearly"
                    ? this.active.reduce((cur, i) =&gt; cur + i.yearly, 0)
                    : this.active.reduce((cur, i) =&gt; cur + i.quarter, 0);
                return html`
                  Total events: ${total}
                `;
              }),
              html`
                Loading...
              `
            )
          }</p>