# Update cursor immediately before and after a long loop

**URL:** <https://discourse.processing.org/t/update-cursor-immediately-before-and-after-a-long-loop/37867>\
**Category:** Coding Questions\
**Created:** [July 7, 2022, 7:51am UTC](https://discourse.processing.org/t/update-cursor-immediately-before-and-after-a-long-loop/37867 "2022-07-07T07:51:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nemecsek69](https://avatars.discourse-cdn.com/v4/letter/n/dbc845/32.png) [@nemecsek69](https://discourse.processing.org/u/nemecsek69)\
**Post date:** [July 7, 2022, 7:51am UTC](https://discourse.processing.org/t/update-cursor-immediately-before-and-after-a-long-loop/37867/1 "2022-07-07T07:51:05Z")

</div>

JS newbie here.

This is an extreme simplification of the real code but the general behavior is the same: after clicking the button I want to **change the cursor to “wait”** , execute a blocking loop for 3 seconds, and then **restore the cursor to “default”**.

Is it possible to do this without going through async/await that I have no idea how to use?

```auto
let button;
let background_red_color = true;

function long_blocking_loop() {
    // stops 3 seconds here
    let start = new Date().getTime();
    let end = start;
    while(end < start + 3000) {
        end = new Date().getTime();
    }
    background_red_color = !background_red_color;
}

function setup() {
    createCanvas(400,400);

    button = createButton("Click me!");
    button.position(10,10);
    button.mousePressed(() => {
        console.log("Button clicked...");
        button.style("cursor", "wait"); // <= set wait cursor here
        long_blocking_loop();
        button.style("cursor", "default"); // <= reset cursor here
        console.log("...action completed")
    });

}

function draw() {
    background(background_red_color ? "red":"blue");
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 7, 2022, 8:17pm UTC](https://discourse.processing.org/t/update-cursor-immediately-before-and-after-a-long-loop/37867/2 "2022-07-07T20:17:03Z")

</div>

You don’t want to put blocking code inside an event handler because it will make the app unresponsive. This code works by setting a delayed callback to restart the draw loop

```auto
let button;
let background_red_color = true;

function restart() {
  button.style("cursor", "default"); // <= reset cursor here
  loop();
  console.log("...action completed");
}

function setup() {
  createCanvas(400, 400);

  button = createButton("Click me!");
  button.position(10, 10);
  button.mousePressed(() => {
    console.log("Button clicked...");
    button.style("cursor", "wait"); // <= set wait cursor here
    noLoop();
    setTimeout(this.restart, 3000);
  }
  );
}

function draw() {
  background(background_red_color ? "red":"blue");
}

```

---

<div class="post-metadata">

**Author:** ![nemecsek69](https://avatars.discourse-cdn.com/v4/letter/n/dbc845/32.png) [@nemecsek69](https://discourse.processing.org/u/nemecsek69)\
**Post date:** [July 8, 2022, 11:10am UTC](https://discourse.processing.org/t/update-cursor-immediately-before-and-after-a-long-loop/37867/3 "2022-07-08T11:10:43Z")

</div>

@quark, thank you, now I understand the logic behind.