Skip to content

Two same simultaneously async components #90

Open
@Magnielcz

Description

@Magnielcz

I have one async component which I'm using multiple times across application. One use case is, I'm rendering same component twice (with different props). But after resolving async component, only first component is re-rendered. Second one is stuck at loading phase. Let me show you, what I mean.

Simple ComponentAsync:

import { asyncComponent } from 'react-async-component';

export default asyncComponent({
	resolve: () => import( './Component'),
	LoadingComponent: () => <div>Loading component</div>
});`

Multiple using of async component:

import ComponentAsync from './ComponentAsync';

...

render()
{
   return (
      <ComponentAsync id={1} />
      <ComponentAsync id={2} />
    );
}

My first thought was, the problem is in needToResolveOnBrowser function.
For first component returns true and component is continue to resolving module. For next one is returns false, even the async component is still unresolved. After a while, I think it's wanted behavier, but I'm missing the piece of code, where and what should cause re-render for my second async component after first component is resolved.

Activity

oyeanuj

oyeanuj commented on Aug 15, 2018

@oyeanuj

@ctrlplusb @Magniel I have the same issue. I have an editor component being rendered async, and in pages where there are more than one of them, it intermittently doesn't load even though I can see the file loaded in the Network panel.

Any solutions/workarounds?

Magnielcz

Magnielcz commented on Aug 15, 2018

@Magnielcz
Author

@oyeanuj I switch to 'react-loadable'. It has advanced functionality, very similar syntax and renders multiple instances of async component at once correctly.

kivohin

kivohin commented on Sep 18, 2018

@kivohin

We are having the exact same issue as @Magniel, is there any update on this @ctrlplusb?

added a commit that references this issue on Sep 19, 2018
97a21e8
thebugger2000

thebugger2000 commented on Jan 20, 2020

@thebugger2000

Hey,

There's no other way to reach out you I guess. My name is Jim Ferguson. I'm working on a ionic/angular app. you made a post about web share last month. I was wondering if you have any suggestions for how to post a image to the share sheet or straight to the Instagram app on iOS to start a post for the user with my image attached?

you posted in:
microsoft/TypeScript#18642

I know this is out of the blue, but this has been killing me for over a week now.

Please reach out at your earliest convenience.

Thank you

Jim

Magnielcz

Magnielcz commented on Jan 21, 2020

@Magnielcz
Author

Hey,

There's no other way to reach out you I guess. My name is Jim Ferguson. I'm working on a ionic/angular app. you made a post about web share last month. I was wondering if you have any suggestions for how to post a image to the share sheet or straight to the Instagram app on iOS to start a post for the user with my image attached?

you posted in:
microsoft/TypeScript#18642

I know this is out of the blue, but this has been killing me for over a week now.

Please reach out at your earliest convenience.

Thank you

Jim

Hi, I used Web Share on Android platform for sharing recorded video. Last time I was digging into Web Share API, Safari on iOS did not support Web Share level 2 (= file share), so I'm sorry, I don't think it is possible at this moment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Two same simultaneously async components · Issue #90 · ctrlplusb/react-async-component