Coder Social home page Coder Social logo

During inspector scrubber interactions (slider control, the scrubbable labels of number controls) switch the inspector store to "real time mode" about utopia HOT 2 CLOSED

balazsbajorics avatar balazsbajorics commented on August 14, 2024
During inspector scrubber interactions (slider control, the scrubbable labels of number controls) switch the inspector store to "real time mode"

from utopia.

Comments (2)

seanparsons avatar seanparsons commented on August 14, 2024

I've tried a few approaches but tellingly when I put an update directly to the input element itself it still felt laggy.

Some other discoveries:

  • For more complicated projects the building of the execution scope ends up being quite costly for each change as the require function changes with each change to the project contents.
  • The mutation/resize observers in the DOM walker run when there's any slack which means they end up running when there's any slight pause in the scrubbing which could be exacerbating any perceived lag.

from utopia.

balazsbajorics avatar balazsbajorics commented on August 14, 2024

okay so this is where I got so far:

  1. indeed horrible performance is making things bad, but
  2. weirdly React for some reason yields re-rendering of the slider control, even though in theory it doesn't use Deferred or any other low priority fiber setting, or anything like that. The slider component has a local state! which should update "real time" with the drag and the canvas, but for some reason the re-render is not queued. I need to look into more to understand why. I want to work a bit more on this because I feel like this reveals something about React I don't understand

from utopia.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.