# Prevent reloading embedded notebook cell on resize

**URL:** https://talk.observablehq.com/t/prevent-reloading-embedded-notebook-cell-on-resize/6343
**Category:** Help
**Created:** [March 11, 2022, 7:28pm UTC](https://talk.observablehq.com/t/prevent-reloading-embedded-notebook-cell-on-resize/6343 "2022-03-11T19:28:22Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)
#### Post date: [March 11, 2022, 7:28pm UTC](https://talk.observablehq.com/t/prevent-reloading-embedded-notebook-cell-on-resize/6343/1 "2022-03-11T19:28:22Z")

</div>

Hi!

I have a webpage where I’ve embedded several cells from a notebook. One of the cells returns is the date range from a brush. Here is the embed code for that cell.

```auto
  if (name === "dateRange") {
        
        return {
            pending() {},
            fulfilled(value) {

                endDate = value[1]
                startDate = value[0]

loadImagesToAnimate(startDate, endDate)

            },
            rejected(error) {
                node.textContent = error.message;
            }
        }
    }

```

In my webpage I then use these date values to load a bunch of images to render in three.js. By default the brush is set to a year, so 365 images are loaded.

My issue is that whenever the window is resizes the embed code is rerun several times (as the window is moving from one size to another). I understand why this is desirable so that a visualization adjusts with the screen width, but in this case it ends up loading a huge number of files.

Is it possible to not have a cell run when the window resizes?

Hope that makes sense.

---

<div class="post-metadata">

### Author: ![yurivish](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/yurivish/32/198_2.png) [@yurivish](https://talk.observablehq.com/u/yurivish)
#### Post date: [March 11, 2022, 8:29pm UTC](https://talk.observablehq.com/t/prevent-reloading-embedded-notebook-cell-on-resize/6343/2 "2022-03-11T20:29:18Z")

</div>

It’s a good question. There are a couple of possible approaches here, one of which is to store the previous start and end dates, and only re-fetch the data when they change. This could be done in the cell that defines `loadImagesToAnimate` – could you share that definition here?

It also sounds like the new requests are re-requesting the same files – is that right? The browser generally does caching of file contents, so I don’t think they would need to be re-loaded from scratch, though they would need to be re-processed and that can be expensive.

---

<div class="post-metadata">

### Author: ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)
#### Post date: [March 11, 2022, 9:14pm UTC](https://talk.observablehq.com/t/prevent-reloading-embedded-notebook-cell-on-resize/6343/3 "2022-03-11T21:14:48Z")

</div>

Hi and thanks for your response yurivish. Yes, I ended up checking if the dates had changed, and only run my function if they do. That does the trick! Good point about the requests. Yes, the images were cached it was the processing that was causing the problems.  
cheers and thanks again

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [March 12, 2022, 4:39pm UTC](https://talk.observablehq.com/t/prevent-reloading-embedded-notebook-cell-on-resize/6343/4 "2022-03-12T16:39:17Z")

</div>

> [@mbrownshoes](#):
>
> Is it possible to not have a cell run when the window resizes?

It seems that your cell references Observable’s `width` variable, which produces a new value whenever the viewport width changes. If you can’t figure out the dependency right away, have a look at the [minimap](https://observablehq.com/@observablehq/minimap).

Since you (probably?) only need the width for your WebGL canvas, I recommend to listen directly to `resize` events in that cell and update your renderer accordingly. You can read more about it in [three.js - Responsive Design](https://threejs.org/manual/#en/responsive).

You may also want to have a look at [Efficient Responsiveness / Fabian Iwand | Observable](https://observablehq.com/@mootari/match-media).
