#Ongoing issue with prefetching js

26 messages · Page 1 of 1 (latest)

trail flare
#

I've had long running issues with prefetching in a certain part of my application. I have attempted to recreate it to no avail. Is there any way to decipher the q-manifest.json to see if there is an issue with the files not being linked together properly.

I am 100% sure that it is not prefetching the js. After deploying a new version with CF Pages, I get a completely new url that my browser hasn't seen. Go to the page, wait 10-20 seconds, click a button. The result is delayed. It shows up in chrome dev tools as well with a half second delay.

I sadly cannot share any of the code as it is confidential, however if anyone has any tips on how to debug this, i would be greatly appreciative.

The specific things that are related:
Latest Qwik + City versions
Uses CF Pages
The dom elements are created from a signal array that is mapped which is set with a callback of a websocket, not using a resource
The page is on a dynamic route
A useVisibleTask doesn't run on the first time page load, as it is not prefetched however it does run after the first visit.

trail flare
#

Ok, update, I actually found something that works. Setting "eagerness: true" for all the useTasks works.
However there is no documentation on when to use this/why it doesn't work with other things.
All the components that are being interacted with are visible on the screen, and this is the only place I have run into this issue over the couple months I've been working with Qwik.

acoustic lodge
#

@trail flare did you make an issue in GitHub? This sounds like it needs to be mentioned in the docs somewhere

trail flare
trail flare
#

Don't worry, eagerness true didn't fix it.

#

I don't know what i was thinking last night.

#

it seems better though.

#

Maybe i missed a couple useTasks

acoustic lodge
trail flare
#

Might just be masking the issue by fetching it earlier, so it is more likely that it is downloaded by the time the button is pressed, as opposed to before when it was fetched on click

#

Maybe it isn't detected as "visible" for whatever reason

#

i'm not sure.

acoustic lodge
trail flare
#

I don't believe so.

#

it is however in a dialog element that looks like this

# 
    return (
        <div>
            <dialog
                ref={modalRef}
                class="relative h-[675px] w-[500px] rounded p-0 shadow-sm dark:bg-neutral-700"
            >
                <div class="flex h-full flex-col">
                    <SecurityInfo />
                    {orderState.value === "Input" && <InputPage />}
                    {orderState.value === "Processing" && <ProcessingPage />}
                    {orderState.value === "Complete" && <CompletePage />}
                    {orderState.value === "Error" && <InputErrorPage />}
                </div>
            </dialog>
        </div>
    );
trail flare
acoustic lodge
trail flare
#

and i have tried so many things to work out why

#

ill have another shot at it later.

trail flare
# acoustic lodge Yeah not at all. If anything I think this would be a common use case

Hi, I think I've finally drilled down to the root of the issue.
In this code, the "func" function is not preloaded, and instead will be fetched at the time of the button press.

import { $, component$, useSignal, useTask$ } from "@builder.io/qwik";

export const func = $(() => {
    console.log("X");
});

export default component$(() => {
    const x = useSignal<number>(0);

    useTask$(async (ctx) => {
        ctx.track(() => x.value);

        func();
    });

    return (
        <>
            <button onClick$={() => x.value++}>Click me please</button>
        </>
    );
});
acoustic lodge
trail flare
#

not being preloaded