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

if (key === 'locale') {
        const fetchLocales = async () => {
          const r = await fetch('/src/demo/locales.json');
          const d: Locale[] = await r.json();
          return d.map(n =&gt; html`<option value="${n.code}">${n.name}</option>`);
        };

        // tslint:disable: max-line-length
        return html`<div class="container__prop">
          <label>
            <span>${key}</span>
            <select value="${value}">${until(fetchLocales(), nothing)}</select>
          </label>
        </div>`;
        // tslint:enable: max-line-length
      }

      return html`<div class="container__prop">
        <label>
          <span>${key}</span>
          <input value="${value}" type="${inputType}">
        </label>
      </div>`;
    });

<div>${$l("Attachment")}</div>
                    

                    <button class="icon tap">
                        
                        <div>${$l("Move")}</div>
                    </button>

                    <button class="icon tap negative">
                        
                        <div>${$l("Delete")}</div>
                    </button>
                

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

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

                 this.edit()} ?disabled=${readonly}&gt; 
            </div>

            <div class="fabs">
                <button class="primary icon fab tap save-button">
                    
                    <div>${$l("Save")}</div>
                </button>
</div>

${user.group_ids[0] === SYSTEM_GROUP_ID_USER
              ? html`
                  <table class="card-content">
            <tbody><tr>
              <td>${hass.localize("ui.panel.config.users.editor.id")}</td>
              <td>${user.id}</td>
            </tr>
            <tr>
              <td>${hass.localize("ui.panel.config.users.editor.owner")}</td>
              <td>${user.is_owner}</td>
            </tr>
            <tr>
              <td>${hass.localize("ui.panel.config.users.editor.group")}</td>
              <td>
                <select> user.group_ids[0])
                  )}
                &gt;
                  ${GROUPS.map(
                    (groupId) =&gt; html`
                      <option value="${groupId}">
                        ${hass.localize(`groups.${groupId}`)}
                      </option>
                    `
                  )}
                </select>
              </td>
            </tr><tr></tr></tbody></table>

padding-top: 40px;
        margin-top: 40px;
        border-top: 2px solid #f8f8f8;
      }

      article {
        padding: 1.4rem;
        margin-bottom: 4px;
        background: #f8f8f8;
        border-radius: 2px;
        color: #585858;
      }
    
    <section class="twitter-feed">
      <h4>TWEETS</h4>
      ${until(getTweets().then(resp =&gt; showTweets(resp)), showPlaceholder())}
    </section>
  `;
};

${$l("Confirm")}
            

            <div class="invite-code">
                <div class="invite-code-label">${$l("Confirmation Code:")}</div>

                <div class="invite-code-value">${until(secret)}</div>
            </div>
        `;
    }
}

render() {
        return html`
<style>
    :host {
        --canton-loading-control-bottom: 20px;
        --canton-loading-control-left: 10px;
    }

    #canton-loading { color: red }
</style>

    
    ${this.noMap ? '' : html``}
    ${until(this.cantonLayers, html`Loading cantons...`)}
`
    }
}

await inv.unlock(org.invitesKey);
                return inv.secret;
            })();
        }

        return html`
            

            <div class="invite-info">
                <div class="invite-email ellipsis">${inv.email}</div>

                <div class="tags small">
                    <div class="tag ${status.class}">
                        

                        <div>${until(status.text)}</div>
                    </div>
                </div>
            </div>

            
                ${$l("Confirm")}
            

            <div class="invite-code">
                <div class="invite-code-label">${$l("Confirmation Code:")}</div>

                <div class="invite-code-value">${until(secret)}</div></div>

render() {
        return html`
            ${until(this._grid())}
        `;
    }
}

${notes(ele)}
    <section class="addNote">
      <textarea cols="80" rows="2"></textarea>
      <button>Submit</button>
    </section>
    <section class="matchingSilences">
      <span class="matchingSilencesHeaders">
        <h3>Matching Silences</h3>
        
        
      </span>
      ${matchingSilences(ele)}
    </section>
    <section class="history">
      <h3>History</h3>
      ${until(history(ele), html`<div class="loading">Loading...</div>`)}
    </section>
  
`;

render() {
    return html`
      <div>
        
        ${until(this.messageRequest, html`Loading...`)}

        <button>
          Fetch message
        </button>
      </div>
    `;
  }