Navigating to the app admin page inconsistent (not awaiting till page loads properly? )

[ninode97]

Problem

I am experiencing some re-rendering issues and unsure what could be causing this.

When I visit settings page (It load shops configuration from server), not sure why it for a moment of time renders previously active page, and then immediately it renders the page it should... (Attaching video below).

Screen.Recording.2025-01-31.at.11.37.15.mov

The settings page:

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const data = await authenticate.admin(request);
  const config = await prisma.config.findFirst({
    where: {
      shop: data.session.shop,
    },
  });
  return {
    brandColor: config?.brandColor,
    iconColor: config?.iconColor,
    icon: config?.icon,
  };
};

export const action = async ({ request }: ActionFunctionArgs) => {
  const formData = await request.clone().formData();
  const { session } = await authenticate.admin(request);
  const brandColor = formData.get("brandColor") as string;
  const iconColor = formData.get("iconColor") as string;
  const icon = formData.get("icon") as string;

  try {
    const config = await prisma.config.findFirst({
      where: { shop: session.shop },
    });
    if (!config) {
      throw new Error(`Config not found....`);
    }
    await prisma.config.update({
      where: { id: config.id },
      data: {
        brandColor,
        iconColor,
        icon,
      },
    });
    const result = {
      success: true,
      message: "Settings saved!",
    };
    return result;
  } catch (error) {
    const result = {
      success: false,
      message: "Error saving settings.",
    };
    console.error(result.message, error);
    return result;
  }
};

export default function SettingsPage() {
  const fetcher = useFetcher<typeof action>();

  useEffect(() => {
    if (fetcher.state !== "idle" || !fetcher.data) return;

    shopify.toast.show(fetcher.data.message, {
      duration: 2500,
      isError: !fetcher.data.success,
    });
  }, [fetcher.data, fetcher.state]);

  const settingsData = useLoaderData<typeof loader>();

  const [brandColor, setBrandColor] = useState<string>(
    settingsData.brandColor || "#111",
  );
  const [iconColor, setIconColor] = useState<string>(
    settingsData.iconColor || "#111",
  );
  const [iconStyle, setIconStyle] = useState<AvailableIcons>(
    (settingsData.icon as AvailableIcons) || "star2",
  );
  const wasChanged = useMemo(() => {
    return (
      settingsData.brandColor !== brandColor ||
      iconColor !== settingsData.iconColor ||
      iconStyle !== settingsData.icon
    );
  }, [
    brandColor,
    iconColor,
    iconStyle,
    settingsData.brandColor,
    settingsData.icon,
    settingsData.iconColor,
  ]);

  const handleClick = async () => {
    if (fetcher.state === "submitting") return;
    fetcher.submit(
      { icon: iconStyle, iconColor, brandColor }, // Data to send
      { method: "post" }, // Default is the current route's action
    );
  };

  return (
    <Suspense fallback="Loading...">
      <Page>
        <TitleBar title="Settings" />
        <Layout>
          <Layout.Section>
            <Card>
              <Text variant="headingSm" as="h2">
                Theme Settings
              </Text>
              <div className="mb-5"></div>
              <FormLayout>
                <Box
                  borderColor="border"
                  borderWidth="0165"
                  padding="150"
                  borderRadius="300"
                >
                  <InlineGrid gap="400" columns={3}>
                    <PopoverColorPicker
                      hexColor={brandColor}
                      setHexColor={setBrandColor}
                      label="Branding Color"
                    />
                    <PopoverColorPicker
                      hexColor={iconColor}
                      setHexColor={setIconColor}
                      label="Icon Color"
                    />
                  </InlineGrid>

                  <InlineGrid gap="100" columns={3}>
                    <PopoverReviewIconPicker
                      label={"Icon Style"}
                      icon={iconStyle}
                      setIcon={setIconStyle}
                      fill={iconColor}
                    />
                  </InlineGrid>
                </Box>
              </FormLayout>
            </Card>
            <PageActions
              primaryAction={{
                content: "Save",
                loading: fetcher.state === "submitting",
                disabled: !wasChanged,
                onAction: handleClick,
              }}
            />
          </Layout.Section>
        </Layout>
      </Page>
    </Suspense>
  );
}

What could be causing such behaviour for Settings Page ?

[ninode97]

Okay.

With trial & error & repeating over and over again, I have seem to find some workaround. (Shopify Docs Chat Assistant helped with suggesting using navigation.state).

Not sure, if it's correct approach or not, would love to hear any feedback on this matter.

This seems to prevent the issue experienced in the screen-recording attached.

Modified Settings Page:

export default function SettingsPage() {
  const fetcher = useFetcher<typeof action>();

   // -------------> ADD NAVIGATION AND APP BRIDGE
  const navigation = useNavigation(); // Adds navigation
  const app = useAppBridge(); // Adds appBridge
  // ----------------------------------------------------

  useEffect(() => {
    if (fetcher.state === "idle" && fetcher.data) {
      shopify.toast.show(fetcher.data.message, {
        duration: 2500,
        isError: !fetcher.data.success,
      });
    }
  }, [fetcher.data, fetcher.state]);

   // ------------------------ >  Adds hook to set app.loading depending on the navigation state
  useEffect(() => {
    app.loading(navigation.state === "loading");
  }, [navigation.state, app]);
  // ---------------------------------------------------------

  const settingsData = useLoaderData<typeof loader>();

  const [brandColor, setBrandColor] = useState<string>(
    settingsData.brandColor || "#111",
  );
  const [iconColor, setIconColor] = useState<string>(
    settingsData.iconColor || "#111",
  );
  const [iconStyle, setIconStyle] = useState<AvailableIcons>(
    (settingsData.icon as AvailableIcons) || "star2",
  );
  const wasChanged = useMemo(() => {
    return (
      settingsData.brandColor !== brandColor ||
      iconColor !== settingsData.iconColor ||
      iconStyle !== settingsData.icon
    );
  }, [
    brandColor,
    iconColor,
    iconStyle,
    settingsData.brandColor,
    settingsData.icon,
    settingsData.iconColor,
  ]);

  const handleClick = async () => {
    if (fetcher.state === "submitting") return;
    fetcher.submit(
      { icon: iconStyle, iconColor, brandColor }, // Data to send
      { method: "post" }, // Default is the current route's action
    );
  };

  // ----------------------------> If navigation state is loading, return empty JSX (Will add later like a loader or something
  if (navigation.state === "loading") return <></>;
  // -------------------------------------------------

  return (
    <Suspense fallback="Loading...">
      <Page>
        <TitleBar title="Settings" />
        <Layout>
          <Layout.Section>
            <Card>
              <Text variant="headingSm" as="h2">
                Theme Settings
              </Text>
              <div className="mb-5"></div>
              <FormLayout>
                <Box
                  borderColor="border"
                  borderWidth="0165"
                  padding="150"
                  borderRadius="300"
                >
                  <InlineGrid gap="400" columns={3}>
                    <PopoverColorPicker
                      hexColor={brandColor}
                      setHexColor={setBrandColor}
                      label="Branding Color"
                    />
                    <PopoverColorPicker
                      hexColor={iconColor}
                      setHexColor={setIconColor}
                      label="Icon Color"
                    />
                  </InlineGrid>

                  <InlineGrid gap="100" columns={3}>
                    <PopoverReviewIconPicker
                      label={"Icon Style"}
                      icon={iconStyle}
                      setIcon={setIconStyle}
                      fill={iconColor}
                    />
                  </InlineGrid>
                </Box>
              </FormLayout>
            </Card>
            <PageActions
              primaryAction={{
                content: "Save",
                loading: fetcher.state === "submitting",
                disabled: !wasChanged,
                onAction: handleClick,
              }}
            />
          </Layout.Section>
        </Layout>
      </Page>
    </Suspense>
  );
}

(Attachment Video) - "Review Management" page without the update shown in the example above.

Screen.Recording.2025-02-01.at.18.19.41.mov

---

I won't close the issue just yet, in case it's some kind of bug, and whether the approach applied is correct.....

[JannikWempe]

Thanks for sharing this workaround @ninode97

I came across this issue because we face the exact same thing. At some point the navigation started to look weird (just like in your first video).

The workaround prevents the weirdness but it doesn't feel right to me 🤔

[ninode97]

Thanks for sharing this workaround @ninode97

I came across this issue because we face the exact same thing. At some point the navigation started to look weird (just like in your first video).

The workaround prevents the weirdness but it doesn't feel right to me 🤔

I agree that the workaround doesn't feel right, however that was the only thing I found working out...

I think that lag started to happen when I have added "Loader / Action" functions to the page. (Other pages that doesn't have actions, seems not to have this lagging issue).

So my best guess is that when the navigation href changes, it somehow triggers re-render of the previous page, while Loaders are in a state of resolving.

But not sure. Would be great to fix this problem.

[xcxooxl]

I am also experiencing this, glad to see it's not just me, I think it also breaks my auth / session for some reason, like I have this one page that sometimes works and sometimes doesn't when navigating to

[claytonfaria]

facing the same problem, started a couple days ago... hopefully we can get a fix soon

[AlessandroVol23]

+1 I've got the issue as well :(

[lizkenyon]

Hi folks 👋

Thanks for the flag we are taking a look!

[umutnacak]

I think it's part of Shopify admin behavior. When you open the developer tools you would see that a class and a style is applied to the div tag with id AppFrameScrollable when the path is one level deep (app/settings app/help etc).

Class is this(name might be different):

._loading_ygcta_20 {
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    transition: opacity 50ms
}

and the style is this:

view-transition-name: loading-view-container;

Since Firefox does not support view-transition-name behavior is a little different.

If you test your app with routes without /app sub path you don't see that transition.

I tried to ditch the /app part but my app is served under a sub path on my domain so the problem does not go away.

[rana-ji]

Can anyone explain me what am doing wrong

Really appreciate the help

[ejscheepers]

// -------------> ADD NAVIGATION AND APP BRIDGE
const navigation = useNavigation(); // Adds navigation
const app = useAppBridge(); // Adds appBridge
// ----------------------------------------------------

// ------------------------ > Adds hook to set app.loading depending on the navigation state
useEffect(() => {
app.loading(navigation.state === "loading");
}, [navigation.state, app]);
// ---------------------------------------------------------

I used your fix, but it's still happening on mine. 🤷

[bakura10]

This issue is probably due to the switch Shopify made one month or two. I've been able to reproduce that on an app experiment I'm doing. They migrated to view transitions (the native API which allows to perform page transitions) and since then the issue arises. If you try on a browser that do not support view transitions (such as Firefox) the issue does not happen.

We will need to wait for Shopify to either fix the admin or the template.

[huykon]

Hi guys, Do we have any update for this issue from Shopify core team?

[santoshmodi00]

Any update on this guys?, I am have same issue on my app.

[henrytao-me]

The default remix template doesn't seem to have issue. May I know how to you define NavMenu? For remix template, we recommend to use Link component in @remix-run/react like this

import { Link } from "@remix-run/react";
import { NavMenu } from "@shopify/app-bridge-react";

...
      <NavMenu>
        <Link to="/app" rel="home">
          Home
        </Link>
        <Link to="/app/additional">Additional page</Link>
      </NavMenu>

[huykon]

@henrytao-me Yeah I'm using Link import from @remix-run/react but the problem still here. It's not the reason