# Dash Intersection Observer

**URL:** <https://community.plotly.com/t/dash-intersection-observer/77216>\
**Category:** Dash Python\
**Tags:** community-components\
**Created:** [July 27, 2023, 7:46am UTC](https://community.plotly.com/t/dash-intersection-observer/77216 "2023-07-27T07:46:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [July 27, 2023, 7:46am UTC](https://community.plotly.com/t/dash-intersection-observer/77216/1 "2023-07-27T07:46:42Z")

</div>

Hello Dash community,

I just created a small Dash component [dash\_intersection\_observer](https://github.com/RenaudLN/dash_intersection_observer) which allows to trigger callbacks when elements of the app become visible in the viewport. The component wraps around [react-intersection-observer](https://www.npmjs.com/package/react-intersection-observer) which itself wraps around the base javascript Intersection Observer.

My use case was that I have a scrollable dashboard with quite a few graphs and wanted to load the graphs lazily as they come into view.

Here is a mock up of my use case:  
 ![dash-intersection-observer](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/7/4/7432ee57f26cbb6571628022fcefb3ecf159206e.gif)

And here is the code for the above GIF using the intersection observer component:

```python
import random
import time

import plotly.express as px
from dash import Input, Dash, Output, callback, dcc, html, no_update, MATCH
from dash_intersection_observer import DashIntersectionObserver

app = Dash( __name__ )

app.layout = html.Div(
    [
        html.Div(
            [
                html.H3(f"Graph {i + 1}"),
                dcc.Loading(
                    DashIntersectionObserver(
                        html.Div(style={"background": "lightgray", "height": "100%"}),
                        id={"type": "observer", "index": i},
                        triggerOnce=True,
                        style={"height": 450},
                        threshold=0.25,
                    ),
                ),
            ]
        )
        for i in range(20)
    ],
    style={"display": "grid", "gap": "1rem", "margin": "0 auto", "maxWidth": 800}
)

@callback(
    Output({"type": "observer", "index": MATCH}, "children"),
    Input({"type": "observer", "index": MATCH}, "inView"),
)
def update_child(in_view):
    if not in_view:
        return no_update

    time.sleep(1)
    figure = px.line(y=[random.random() for _ in range(10)]).update_layout(
        margin={"l": 0, "b": 0, "t": 0, "r": 0},
    )
    return dcc.Graph(figure=figure)

if __name__ == ' __main__':
    app.run_server(debug=True)

```

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [July 27, 2023, 9:53am UTC](https://community.plotly.com/t/dash-intersection-observer/77216/2 "2023-07-27T09:53:13Z")

</div>

Thanks @RenaudLN for sharing, looks really interesting !

I think @AyushExel could be interested [(based on this topic)](https://community.plotly.com/t/is-dash-suitable-for-computer-vision-dataset-visualisation-purpose/76837)

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [July 27, 2023, 2:46pm UTC](https://community.plotly.com/t/dash-intersection-observer/77216/3 "2023-07-27T14:46:08Z")

</div>

You could use this with AG grid graph components.

Nice!

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [July 28, 2023, 3:39pm UTC](https://community.plotly.com/t/dash-intersection-observer/77216/4 "2023-07-28T15:39:35Z")

</div>

Very helpful component, @RenaudLN . Thank you for creating and sharing with the community.

I just added it to the [community components Index](https://community.plotly.com/t/community-components-index/60098).