HydrateFallback does not work when it moves from another page via clicking a link in ui-nav-menu.

[yuhDAQ]

Issue summary

• @shopify/shopify-app-remix version: 2.3.0
• Node version: v20.11.0
• Operating system: macOS(M1 Air) 14.2.1

Expected behavior

I use HydrateFallback from remix in the page.
I thought it supposed to work when I move to the page from any other pages via clicking a link in ui-nav-menu.

Actual behavior

However, It didn't work.
It skipped rendering HydrateFallback component and started clientLoader.
Until completing clientLoader, page stayed in previous one.
When I reload, HydrateFallback works.

Steps to reproduce the problem

1. Switch Link components to this one. (App Navigation Not Reflecting The Correct URL On Inital Click #369 (comment))
2. Change loader to clientLoader and add HydrateFallback.

Sample Code for HydrateFallback

function getLazyData() {
  return new Promise<LazyData>((resolve) => {
    setTimeout(() => {
      resolve({ message: "Hello from a lazy loader!" });
    }, 1000);
  });
}

export async function clientLoader() {
  console.log("clientLoader function ran");
  let cacheKey = "lazy-data";
  let cached = await localforage.getItem(cacheKey);
  if (cached) {
    return { message: cached };
  }

  let data: LazyData = await;
  let cacheData = data.message;
  await localforage.setItem(cacheKey, cacheData);
  return cacheData;
}

export function HydrateFallback() {
  return (
    <BlockStack inlineAlign="center">
      <Spinner size="large" />
      <Text variant="headingLg" as="h5">
        now loading
      </Text>
    </BlockStack>
  );
}

clientLoader.hydrate = true;

export default function Index() {
 ///some route components
}

[yuhDAQ]

2024-01-25.16.45.49-1.mov

Actually behave screen capture.

[paulomarg]

Hi, thank you for raising this! I've forwarded it to the team that manages the ui-nav-menu component, and will come back with an updated when I have one.

[yuhDAQ]

@paulomarg
Thanks lot!
Approximately how long will it take?

[yuhDAQ]

@paulomarg
hello, how is this going?

[paulomarg]

Hey, sorry for the radio silence here. We're still digging into this one, unfortunately I don't have any updates to share on it. I'll get back to you as soon as we know more!