Add a flag that allows us to detect while a dynamic imported component is being retrieved

[gndelia]

Feature request

Add a static boolean to indicate whether a component is being dynamically retrieved or not. Even though there's a placeholder to render when the component is being retrieved, this information might be useful to transition other parts of the application, outside of that component

Is your feature request related to a problem? Please describe.

Yes. I asked a similar question in StackOverflow and in Spectrum without any response

My specific problem is that I'm dynamically retrieving a component that renders, among other things, a google map component (this map can be toggled on and off). The layouts differ completely when the map is shown and not. When it is shown, some components are positioned on top of the map. When it's not shown, the layout is a regular css grid

While I'm loading the map component, a spinner is shown (as part of the loading prop that dynamic offers), but given the layout changes, I see the components that are supposed to be on top of the map on top of the spinner. I would like to hide them while the map is being loaded.

A more general problem is something like this

import React, { useState } from 'react';
import dynamic from 'next/dynamic';

const DynamicImportedComponent = dynamic(() => import('Foo/baz'), {
  ssr: false,
  loading: () => <p>loading..</p>
});


const MyComponent: React.FC = () => {
  const [show, setShow] = useState(false)

  const variableComponent = <SomeStyledComponent styled={show}>value of show is {show.toString()}</SomeStyledComponent>
  return (
    <>
    {variableComponent}
    { show && <DynamicImportedComponent />}
    <button onClick={() => setShow(!show)}>toggle</button>
    </>
  )
}

I would like to hide variableComponent while DynamicImportedComponent is being retrieved (that is, while the component is being loaded, but not when it hasn't started to load, nor when it has loaded).

That is because there's a style for SomeStyledComponent for when show equals false, and another for when show equals true and DynamicImportedComponent has loaded, but there's no sense on showing it while it's being retrieved

Describe the solution you'd like

A boolean flag that tells whether the component is being retrieved or not. That way I could just do

{(DynamicImportedComponent.loaded || !DynamicImportedComponent.isLoading) && variableComponent}

Describe alternatives you've considered

So far I haven't, I'm rendering the components on top of the spinner.

Additional context

Some screenshots of my specific problem

When no map is shown

Map is being loaded - I'd like those cards in the bottom to be hidden in the meantime! (that football/soccer ball is my spinner while the map is being loaded 😄 )

Map has loaded - we're good to go

[gndelia]

If my understanding is correct, here is the component that's rendered while the module is being loaded.

Perhaps we could add the state.loading as a static property of the class - so it could be accessed outside.

The problem I see is that the types should be updated to extend ComponentType<P> (current types) to include isLoading as a static property.

Does that even make sense?

[timneutkens]

We mirror React.lazy as much as possible (while also providing the missing loading state as suspense doesn't work server-side). Suspense might solve your case as it allows for a spinner to be shown for a part of the tree when one item suspends (eg the dynamic component). However as said Suspense is not available server-side currently.

One thing that you could potentially do is pass state in a context value and setState in the loading component

[gndelia]

However as said Suspense is not available server-side currently.

At least for my case, I'm loading the component in the frontend (it's noSSR) so it should not be a problem
Not sure if this is a valid scenario in SSR because it is supposed to appear on loading a component after an user's interaction

I will checkout suspense, at it seems it could help in my scenario as I can wrap multiple components.. Though I think it's experimental so I'm not really using it so far. But thanks for the tip 👍

[raindecastro]

@gndelia Were you able to work something out? I'm currently trying to solve something in this area too, where i'm dynamically importing react-quill.

[gndelia]

I'm sorry, but no. The proyect was stopped due to coronavirus spread 😞

The best option in client side seems to go for react.suspense

[raindecastro]

@gndelia It's all good, but thanks for the help! Stay safe!

[jorroll]

After running into this issue, I followed @timneutkens's suggestion which worked well.

One thing that you could potentially do is pass state in a context value and setState in the loading component

Example

const ToolbarTray: FunctionComponent<{}> = () => {
  const { isDialogOpen, closeDialog, openDialog } = useDialogState();

  const [ isDialogLoading, setDialogLoadingStatus ] = useState(false);

  return (
    <DynamicLoadingContext.Provider value={setDialogLoadingStatus}>
      <Button onClick={openDialog}>
        {isDialogLoading ? <CircularProgress /> : <EditIcon />}
      </Fab>

      {isDialogOpen && <EditPersonDialog onClose={closeDialog} />}
    </DynamicLoadingContext.Provider>
  );
};

const EditPersonDialog = dynamic(() => import('~/dialogs/edit-person-dialog'), {
  ssr: false,
  loading: () => {
    const setLoading = useContext(DynamicLoadingContext);

    useEffect(() => {
      setLoading(true);
      return () => setLoading(false);
    }, [setLoading]);

    return null;
  },
});

[dlibis]

how is this working for you? using a hook not inside a component?

[Temetias]

For me, the simplest solution would be just some local state (depending on the use case of course). This seems to work ok. Using something like react-leaflet as an example. Just wanted to drop this here in case someone else is stumbling on the same thing.

const Map = () => {
  const [isLoading, setIsLoading] = useState(true);
  const Leaflet = dynamic(() => import("./path/to/your/LeafletThing"), {
    loading: () => {
      useEffect(() => () => setIsLoading(false), []);
      return <></>;
    },
    ssr: false,
  });
  return isLoading ? <YourLoader/> : <Leaflet/>;
}

[jorroll]

As pointed out in the nextjs docs

dynamic() can't be used inside of React rendering as it needs to be marked in the top level of the module for preloading to work