diff --git a/README.md b/README.md index 675f29cc31d..c6270f120e4 100644 --- a/README.md +++ b/README.md @@ -120,14 +120,15 @@ def index(): on_blur=State.set_prompt, width="25em", ), - rx.button("Generate Image", on_click=State.get_image, width="25em"), + rx.button( + "Generate Image", + on_click=State.get_image, + width="25em", + loading=State.processing + ), rx.cond( - State.processing, - rx.chakra.circular_progress(is_indeterminate=True), - rx.cond( - State.complete, - rx.image(src=State.image_url, width="20em"), - ), + State.complete, + rx.image(src=State.image_url, width="20em"), ), align="center", ), @@ -185,7 +186,7 @@ class State(rx.State): The state defines all the variables (called vars) in an app that can change and the functions that change them. -Here the state is comprised of a `prompt` and `image_url`. There are also the booleans `processing` and `complete` to indicate when to show the circular progress and image. +Here the state is comprised of a `prompt` and `image_url`. There are also the booleans `processing` and `complete` to indicate when to disable the button (during image generation) and when to show the resulting image. ### **Event Handlers**