add status tracker to md and html

[pngwn]

Description

Adds status tracker to Markdown and HTML components in order to give end users feedback that the a response is pending.

Closes #2473.
Closes #1985

Can be tested with the following snippet:

from time import sleep

import gradio as gr


def fn():
    sleep(3)
    return [
        '<div style="text-align: center"><h1>Hello</h1><h2>Hello again</h2><p>hello to all of the people</p></div>',
        "# hello friends\n> who are you?",
    ]


with gr.Blocks() as demo:
    gr.Textbox()
    html = gr.HTML()
    md = gr.Markdown()
    demo.load(fn, inputs=None, outputs=[html, md])

if __name__ == "__main__":
    demo.launch()

Please include:

• relevant motivation
• a summary of the change
• which issue is fixed.
• any additional dependencies that are required for this change.

Closes: # (issue)

Checklist:

• I have performed a self-review of my own code
• I have added a short summary of my change to the CHANGELOG.md
• My code follows the style guidelines of this project
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

A note about the CHANGELOG

Hello 👋 and thank you for contributing to Gradio!

All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.

Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by [@myusername](link-to-your-github-profile) in [PR 11111](https://github.com/gradio-app/gradio/pull/11111)".

If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the
GitHub web UI since that lets you upload files directly via drag-and-drop.

[github-actions]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-2474-all-demos

[abidlabs]

Looks like this closes at #1985 as well (I'll update the main block to reflect that)

[pngwn]

I'll let you in on a secret.

When i created that other issue i ticked this:

I have searched the existing issues

But i didn't search the existing issues at all.

[freddyaboulton]

Thanks @pngwn ! Tested out locally and it works!

[ola13]

Thanks so much for working on this @pngwn! Any idea when this change will get deployed on spaces?

[abidlabs]

Hi @ola13 most likely this should be out tomorrow in gradio 3.5.1 (you’ll have to upgrade the version of gradio if you have an existing Space)

[ola13]

Hi @abidlabs a quick question - how can I upgrade the version manually? Should I create a requirements file with the specified version? I rebooted my app and it seems it's installing gradio 3.1.3:

Collecting gradio==3.1.3
  Downloading gradio-3.1.3-py3-none-any.whl (5.6 MB)

[ola13]

Hello another question, cc @pngwn :) So I'm experimenting with the feature and it works great the first time I load the HTML - however, when I update inputs and re-issue a query, I no longer get a status tracker - you can test it here: https://4fce965b9b0a2363.gradio.app/ - try querying and then requerying - the results are stored in the gradio.HTML - Anything we can do about it? cheers!

[pngwn]

Yeah, this is a bug, will take a look.

[abidlabs]

@ola13 with regards to your question, you will need to update the sdk_version in the README.md file in the Space to 3.6

[ola13]

Thanks @abidlabs!