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. (https://github.com/Shopify/shopify-app-template-remix/issues/369#issuecomment-1759303079)
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]

https://github.com/Shopify/shopify-app-template-remix/assets/97661420/d9de2d0d-658f-4edf-bf01-88748af03c32

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!