React Freshdesk App: window.app.initialized() Not Resolving Consistently

vino · July 28, 2025, 9:42am

Hi all,

I’m building a React app for Freshdesk and currently facing a loading issue. I’m using the useLayoutEffect hook as suggested in a post I came across. However, the code after const client = await window.app.initialized(); doesn’t seem to execute.

I can see the console log "initializing app", but the next log for the client object isn’t printed. Occasionally, the client object does get printed and my app renders the HelloUser component correctly, but this happens inconsistently.

Could you please help me resolve this issue?

import React, {
  useState,
  useLayoutEffect,
  createContext,
  useContext,
} from "react";
import "./App.css";
import HelloUser from "./components/HelloUser";
import ContactForm from "./components/ContactForm/ContactForm";
import OrgProvider from "./components/ContextProviders/OrgProvider";
import ContactModal from "./components/ContactModal/ContactModal";
import SkeletonComponent from "./components/Skeleton/SkeletonComponent";
import { parentLoading } from "./components/Skeleton/skeletonList";
const clientContext = createContext();
const App = () => {
  const [loaded, setLoaded] = useState(false);
  const [child, setChild] = useState(
    <SkeletonComponent items={parentLoading} />
  );

  useLayoutEffect(() => {
    console.log("useLayoutEffects");
    const script = document.createElement("script");
    script.src = "{{{appclient}}}";
    script.addEventListener("load", () => setLoaded(true));
    script.defer = true;
    document.head.appendChild(script);
  }, []);

  useLayoutEffect(() => {
    if (!loaded) return;
    console.log("done loading");
    const initializeApp = async () => {
      try {
        console.log("initializing app");
        const client = await window.app.initialized();
        console.log(client);
        
        const data = await client.instance.context();
        let location = data.location;
        let InstanceData = data.data;
        if (location === "ticket_sidebar") {
          console.log("ticket_sidebar");
          const providerComponent = (
            <OrgProvider>
              <clientContext.Provider value={client}>
                <HelloUser />
              </clientContext.Provider>
            </OrgProvider>
          );

          setChild(providerComponent);
        } else if (
          location === "modal" &&
          InstanceData.formType === "Contacts List"
        ) {
          console.log("modal1");
          const providerComponent = (
            <OrgProvider>
              <clientContext.Provider value={client}>
                <ContactModal orgInfo={InstanceData.orgDetails} />
              </clientContext.Provider>
            </OrgProvider>
          );
          setChild(providerComponent);
        } else if (
          location === "modal" &&
          InstanceData.formType === "Contact"
        ) {
          console.log("modal 2");

          const providerComponent = (
            <OrgProvider>
              <clientContext.Provider value={client}>
                <ContactModal
                  orgInfo={InstanceData.orgDetails}
                  contact={InstanceData.contact}
                />
              </clientContext.Provider>
            </OrgProvider>
          );
          setChild(providerComponent);
        } else {
          const providerComponent = (
            <OrgProvider>
              <clientContext.Provider value={client}>
                <ContactForm
                  type={InstanceData.formType}
                  orgDetails={InstanceData.orgDetails}
                />
              </clientContext.Provider>
            </OrgProvider>
          );
          setChild(providerComponent);
        }
      } catch (error) {
        console.error(error);
        setChild(<div>Something went wrong</div>);
      }
    };
    initializeApp();
  }, [loaded]);

  return <div>{child}</div>;
};

export default App;

export const useClient = () => useContext(clientContext);