Widget loader indicator

[Yuripetusko]

When we load the widget for the first time, it can take 5 - 10 seconds for it to appear and there's no loader or any event I can see to subscribe to in order to display a preloader while the component is loading. Any recommendations on how to improve this?

Screen.Recording.2023-04-13.at.01.19.06.mov

[chybisov]

@Yuripetusko Hey 🙂 I assume you use the Widget with Next.js and dynamic import. You can show a loading indicator like this

export const LiFiWidgetNext = dynamic(
  () => import('../components/Widget').then((module) => module.Widget) as any,
  {
    ssr: false,
    // loading indicator
    loading: () => <LoadingIndicator />,
  },
);

const Home: NextPage = () => {
  return <LiFiWidgetNext />;
};

Please take a look at the updated Next.js example here https://github.com/lifinance/widget/tree/main/examples/nextjs

There is also an updated next.config.js with a simplified configuration for Next.js 13. 🙂

[Yuripetusko]

Ahh, this is due to a dynamic import. Right right, It didn't click for me immediatly, and we are using dynamic imports a lot :) Thanks

[chybisov]

You're welcome! Let me know if you have any other questions or need support with integration 🙂