Scroll to output

[pngwn]

Implements a loader per component and scrolls the relevant output component into view when an API request has been triggered.

The behaviour has been implemented such that if there are multiple outputs for a given trigger then the component that is closest to the top of the page will be the target of the scroll-into-view functionality.

Additionally, the components have been refactored so that the Block wrapping is done in the APP rather than the component package. This allows for greater flexibility with app-specific styling and cleans up the components somewhat.

Not every component has a laoder as the standard laoder design doesn't work for smaller components.

In order to test, try the fake_gan, chatbot, and kitchen_sink demos.

Workbench probably looks quite messy atm. Will clean that up later.

Closes #1055.

[pngwn]

@gary149 @abidlabs This can be reviewed, test failures are just due to some code changes which I'll fix shortly.

[abidlabs]

Very cooool! Love the loading indicator and the scrolling.

As you mentioned, we don't have a loading indicator for the smaller components, such as Textbox. Are you planning on adding them @pngwn?

[abidlabs]

cc @aliabid94 as well

[pngwn]

@abidlabs Yes, but need to chat with @gary149 about those first. I think it is okay to merge this when we're happy and add the others in a follow up. I have some idea for some form inputs but need to think about 'empty' styles + laoders for others.

[abidlabs]

Whoops my bad @pngwn I pushed some changes to this branch when I thought I was working on a different branch. It's just small changes to make sure the kitchen sink and 2 other demos work when run from any path.

If you'd like, I can revert and move to a new branch?

[abidlabs]

@abidlabs Yes, but need to chat with @gary149 about those first. I think it is okay to merge this when we're happy and add the others in a follow up. I have some idea for some form inputs but need to think about 'empty' styles + laoders for others.

Edit: If there's a strong reason to merge, that's okay, but I think would be better to wait until we have the loaders for all of the components, because it does worsen the experience significantly (even for us testing/using gradio internally) if we don't have loaders for some demos.

[pngwn]

Main reason to merge is that there a bunch of changes (refactors) in this branch that will be useful for other features + potentially lots of conflicts with other work that would happen in the meantime. Might take a few days to finalise some of the loaders.

The chatbot loader in particular can't happen until the 'custom js' branch is in (and that will need some tweaks to work for that purpose).

It shouldn't be for long anyway, a day or two at most. But that might be long enough to cause problems for other branches. I can put in some default loaders, even if unfinished, for all components in the meantime. At least there will be some feedback. I'll take care of that in the morning.

[pngwn]

And dw about the extra commit.

[pngwn]

Added loaders for every component that can load anything. Going to merge this so I can proceed with other work. Feel free to test it out more thoroughly and let me know if anything is broken.