# Gradio App Initialization hook/event
**URL:**
**Author:**  [@sssingh](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fsssingh)%5C
**Post date:** [October 4, 2023, 6:15pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fgradio-app-initialization-hook-event%2F57422%2F1 "2023-10-04T18:15:35Z")
Is there a method to trigger an event immediately after the app component loads but before it becomes visible? This would serve as an ideal location for executing certain initialization tasks. For instance, if I wish to initiate my app in ādarkā mode, this would be the opportune moment to apply JavaScript code that adds the ādarkā class to the body element. This ensures that the app is displayed in dark mode from the outset.
Currently, I have a āDark Modeā checkbox that activates the JavaScript code when a user checks it, thereby switching the app to dark mode. However, my goal is to have this process occur automatically upon app startup.
[App URL](https://huggingface.co/spaces/sssingh/pic-to-story)
Is there anyway to do it?
---
**Author:**  [@radames](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fradames)%5C
**Post date:** [October 5, 2023, 4:18am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fgradio-app-initialization-hook-event%2F57422%2F2 "2023-10-05T04:18:59Z")
hi @sssingh ,
Yes there is a `.load` event that works like any other event listeners on Gradio, and you could attach js code on it
```python
import gradio as gr
import datetime
on_load="""
async()=>{
console.log("HELLO");
}
"""
with gr.Blocks() as demo:
def get_time():
return datetime.datetime.now().time()
dt = gr.Textbox(label="Current time")
demo.load(get_time, inputs=None, outputs=dt, _js=on_load)
demo.launch()
```
[blocks#blocks-load](https://www.gradio.app/docs/blocks#:~:text=ML%20Flow%20dashboard-,load,-gradio.Blocks)
---
**Author:**  [@sssingh](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fsssingh)%5C
**Post date:** [October 5, 2023, 9:22am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fgradio-app-initialization-hook-event%2F57422%2F3 "2023-10-05T09:22:46Z")
Thank you, @radames! It successfully resolved my issue.
However, I observed something a bit unusual, unrelated to my problem thoughā¦
Now when the app loads up darkmode is enabled, to indicate this I set the checkboxās āvalueā property to True so that it would initially appear checked, and it did.
However, I noticed that the checkbox became non-interactive; I couldnāt uncheck it anymore.
To make it functional, I had to set āinteractiveā to True (along with āvalueā set as True), now I can uncheck it.
Interestingly, when the checkboxās āvalueā is False, it remains interactive by default, without the need to set āinteractiveā to True.
Is this behavior expected? It seems somewhat counterintuitive, and I couldnāt find any documentation related to this issue.
Thx.
---
**Author:**  [@radames](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fradames)%5C
**Post date:** [October 5, 2023, 6:24pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fgradio-app-initialization-hook-event%2F57422%2F4 "2023-10-05T18:24:03Z")
Interesting, afaik, when you create a component without attaching it as an input component on any event listener, it wonāt be interactive unless you set `interactive=True`.
If you think itās a bug, could you please make a minimum reproducible code snippet and submit an issue? [GitHub - gradio-app/gradio: Build and share delightful machine learning apps, all in Python. š Star to support our work!](https://github.com/gradio-app/gradio) Thanks!
---
**Author:**  [@sssingh](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fsssingh)%5C
**Post date:** [October 5, 2023, 7:05pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fgradio-app-initialization-hook-event%2F57422%2F5 "2023-10-05T19:05:25Z")
yup seems behavior is not consistent, will raise an issue.
none of the checkboxes are attached to any i/p, o/p or event listener.
chkbox1 and chkbox2 remains āinteractiveā but chkbox3 becomes non-interactive (where value is passed as True)
```python
import gradio as gr
def greet(name):
return "Hello " + name + ", how r u today?"
if __name__ == " __main__":
with gr.Blocks() as demo:
# value and interactive properties not provided ==> Checkbox is interactive in app
chkbox1 = gr.Checkbox(
label="Checkbox-1 - value and 'interactive' properties not provided:",
)
# value = False and interactive properties not provided ==> Checkbox is interactive in app
chkbox2 = gr.Checkbox(
label="Checkbox-3 - 'value' = False and 'interactive' property not provided:",
value=False,
)
# value provided as True and interactive property not provided ==> Checkbox is non-interactive in app
chkbox3 = gr.Checkbox(
label="Checkbox-2 - 'value' = True and 'interactive' property not provided:",
value=True,
)
input_text = gr.Textbox(label="Enter you name:")
output_text = gr.Textbox(label="Greetings")
button = gr.Button(value="Greet")
button.click(fn=greet, inputs=[input_text], outputs=[output_text])
demo.launch()
```