Page refresh loader problems

[south moat]

How do I display a loader when I refresh the page? I only do loader operation in onpending by using useResource in navigation, but when we refresh the page, the loader does not appear.

[errant pewter]

Hi @south moat! Could you give us a bit more context please?

It'll be hard to help you without more information

[south moat]

Actually, I don't want anything different from what I said. How can I put a loader on the screen while using useResource while refreshing the page until the content is loaded? @errant pewter

[errant pewter]

Are you using SSR?

If you use SSR, useResource will block rendering on the server until the resource is resolved so that you don't need to display a loading indicator: https://qwik.dev/docs/components/state/#useresource. I believe the advantage here is also that data-fetching from the server is faster, especially if you have multiple db roundtrips to do

[south moat]

yes i am using ssr

You said that it would prevent the creation of images on the server until the source is resolved, but it does not work that way. For example, I have a lightbox. When I click on the url, the lightbox opens on the screen and the page opens. It has been loaded, but since the small data of the lightbox has not arrived yet, I want to put a loader on the page so that the lightbox can shrink and grow later. so that this happens automatically when we refresh the page.

@errant pewter

[errant pewter]

Is your lightbox in a layout.tsx?

[south moat]

no

[south moat]

what should I do ? @errant pewter

[errant pewter]

Sorry I'm not sure here.. I thought useResource would block rendering in SSR but I'd have to play with it again to make sure.. but I have very little time atm.. If you're really stuck perhaps you can make an MRE (minimal repro) or stackblitz. It'll help me or others help you out more easily!

[echo schooner]

are the data present in the page while it renders or is it blank.

[south moat]

its blank.

[echo schooner]

could you paste the code here if its not that sensitive.
If its sensitive you could remove those and paste it.

[south moat]

Exactly which part should I paste?

[echo schooner]

the code where you fetch data

you could paste from header till the start of your component

[south moat]

`export default component$<Props>(({ closeLb, toggleLb = false, pageType, classN, toggleProps, lbxTitle }) => {

const renderContent = (() => {
if (pageType === "model-detail-lbx") {
return <TechnicalModalComponent titleName={toggleProps.titleName} model={toggleProps.model} segment={toggleProps.segment}/>
}

})

return (
<div class={common__lbx ${classN ? classN : ""}}>

    {
      !(loc.url.searchParams.get("tip")==="kredi") ?
        <>
          {
            !pageType &&  !loc.url.pathname.includes("/honda-aksesuarlari") &&
            <span class='lb-title'>{title.value}</span>
          }
          {
            btnStatus.value === true &&
            <div class="lbx__back" onClick$={()=>goBack()}>
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 21L13 16L18 11" stroke="black" stroke-width="2" stroke-linecap="round" />
              </svg>
              <div class="lbx__back-text">
                  <p>Geri</p>
                  <p>{packageNN.value}</p>
              </div>

            </div>
          }
      
            <div class="lbx__close-btn" onClick$={() =>{
              closeAnimation()
              setTimeout(()=>{
                closeLb()
              },300)
            }}>
            </div>
          </div>
        </>
        :
        <div class="ccl__head">
          <span class="lb-title"> Hesaplama</span>
          <span onClick$={() =>{
              closeAnimation()
              setTimeout(()=>{
                closeLb()
              },500)
            }}class="close-btn big"></span>
        </div>
    }


    {renderContent()}
   
  </div>
</div>

)
});
``

Here is a part of my code, but I base the extraction process on a component in the lightbox according to the url. The data extraction process takes place with the useResource in that component.

<

[echo schooner]

could you try making use of routeloader$ or useTask$ and pass the data to the component. Also Qwik usually doesnt allow functions not be serialized so you could wrap the function renderContent in $().

[south moat]

I wrapped the renderContent method in $() like you said nothing changed, but I didn't understand what you were talking about before. Can you show it in my code? @echo schooner

[echo schooner]

coudnt get back to you faster. Is it solved.

[south moat]

no