How to optimize this useWindowSize() hook?

[hollow holly]

I need to make useWindowHook to check the sizes of the screen. I cannot store sizes by default as {width: document.body.clientWidth, height: document.body.clientHeight} because it is not seeing document object. So the first return is {width: 0, height: 0}, and the functionality of some components lagging for 1 second. How can I fix it?

`import {$, useOnWindow, useStore} from "@builder.io/qwik";

export const useWindowSize = () => {
const sizes = useStore({width: 0, height: 0});
useOnWindow(
['load', 'resize'],
$(() => {
sizes.width = document.body.clientWidth;
sizes.height = document.body.clientHeight;
})
);
return sizes;
}`

[hollow holly]

How?

[boreal citrus]

Do you mean that it has a delay and you want to get rid of it? And do you mean a delay every time you resize or a delay only the first time that you resize?

If it's only the first time, a reminder to try the preview rather than dev mode so the service worker will be enabled.

Also you can check out a memory game I made with Qwik at https://joemoulton.dev. Try resizing or switching between portrait and landscape and see that there's a delay before it recalculates the rows/columns. I think that's about the best response time you'll get.

I haven't compared to react or vanillajs to see if qwik has some added delay, but if it does it should be very small.

[spark sinew]

Qwik will run js ASAP but there will always be some time that the user sees html that hasn't been adjusted.
So either you make the CSS so it's not noticeable, or you don't render on SSR and make the user wait before it renders.