fix the loading row remains even after the plugins are loaded

[zhengtianbao]

Fixes #729 site: plugin list "Loading"... row never disappears

remove table tr element which shows "Loading..." before render plugin list table.

[k8s-ci-robot]

Welcome @zhengtianbao!

It looks like this is your first PR to kubernetes-sigs/krew 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes-sigs/krew has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[ahmetb]

Despite this fixes the issue I am inclined to think this is not the idiomatic way to address the issue. Do you know why render() doesn't replace contents of the table tag? Maybe there's an option to do that.

[zhengtianbao]

Despite this fixes the issue I am inclined to think this is not the idiomatic way to address the issue. Do you know why render() doesn't replace contents of the table tag? Maybe there's an option to do that.

@ahmeth because the render function actually creates DOM nodes and appends them to a DOM tree. In this case, the rendered DOM plugin-tables will append to <tbody id="krew-plugins-list">, so the static DOM <tr><td colspan="3">Loading...</td></tr> that not created by render() is still there, here is there way I thought to solve this :

1. remove <tr><td colspan="3">Loading...</td></tr> lines at plugins.md; it's simple but lost loading stat infomation

2. empty table content before render() plugin-tables, this actually what I do, it's seems like a hacker way

3. plus with option 1, render <tr><td colspan="3">Loading...</td></tr> before fetch plugins. so this DOM is created by render(), after fetch plugin info, render() will change it's content again

The option 3 code may like :

  <script type="module">
    import {html, render} from 'https://unpkg.com/lit-html?module';
    const repoLink = repo => repo
        ? html`<a href="${repo}" rel="nofollow"><img src="https://img.shields.io/github/stars/${repo}.svg?label=stars&logo=github"/></a>`
        : html``;
    const row = plugin => html`<tr>
        <td><a rel="nofollow" href="${plugin.homepage}">${plugin.name}</a></td>
        <td>${plugin.short_description}</td>
        <td>${repoLink(plugin.github_repo)}</td>
    </tr>`;
    const tableRows = plugins => plugins.map(p => html`${row(p)}`);
    const error = e => e
        ? html`<tr><td/><td>failed to load plugins: ${e}<td><td/></tr>`
        : html`<tr><td/><td>failed to load plugins<td><td/></tr>`

     // here add loading info by render
    const pluginTableElem = document.querySelector("#krew-plugins-list");
    const loading = html`<tr>
            <td colspan="3">Loading...</td>
        </tr>`
   // render it first time
    render(loading, pluginTableElem)

    document.addEventListener('DOMContentLoaded', async () => {
        if (!pluginTableElem){
            return;
        }
        try {
            const resp = await fetch('/.netlify/functions/api/plugins');
            const json = await resp.json()
            const plugins = json.data?.plugins;
            if (!Boolean(plugins?.length)) {
                render(error(), pluginTableElem);
                return;
            }
            plugins.sort((a,b) => a.name.localeCompare(b.name));
            render(tableRows(plugins), pluginTableElem);
        } catch (e) {
            render(error(e), pluginTableElem);
        }
    });
</script>

If you agree with 3, I'll submit my code and pull request again, thank you for review.

[ahmetb]

Understood. I think .innerHTML='' could work but we can alternatively empty <table> with

while (tableElem.firstChild) parent.removeChild(tableElem.firstChild);

would that work?

[chriskim06]

small side note: the import from https://unpkg.com/lit-html?module redirects to the latest version (right now https://unpkg.com/lit-html@2.0.1/lit-html.js?module). we should probably pin that to this version as well like https://unpkg.com/lit-html@2.0.1?module?

[zhengtianbao]

Thanks and done.

[ahmetb]

I think we should be removing "Loading..." after there's a response? 😇

[zhengtianbao]

sorry, my mistake, moved.

[ahmetb]

PTAL @ preview page https://6172131faa8d4d00086a9fac--kubernetes-sigs-krew.netlify.app/plugins/ It's failing. I think one of the words have a typo.

[ahmetb]

/lgtm
/approve
Thanks!

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ahmetb, zhengtianbao

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [ahmetb]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[zhengtianbao]

It's my first solved issue, thank you for your help and patience.