Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Two same simultaneously async components #90

Open
Magnielcz opened this issue Jul 24, 2018 · 5 comments · May be fixed by #93
Open

Two same simultaneously async components #90

Magnielcz opened this issue Jul 24, 2018 · 5 comments · May be fixed by #93

Comments

@Magnielcz
Copy link

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.
@oyeanuj
Copy link

oyeanuj commented Aug 15, 2018

@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
Copy link
Author

Magnielcz commented Aug 15, 2018 •
edited
Loading

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

@kivohin
Copy link

kivohin commented Sep 18, 2018

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

anant-singh pushed a commit to anant-singh/react-async-component that referenced this issue Sep 19, 2018
Add a resolving state to each instance of the component, so every ins…
97a21e8 
…tance renders once the module is resolved.

Fixes ctrlplusb#90
@anant-singh anant-singh linked a pull request Sep 19, 2018 that will close this issue
Open
@thebugger2000
Copy link

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
Copy link
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
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add resolving state to component for multiple instances. anant-singh/react-async-component
4 participants
@Magnielcz @oyeanuj @thebugger2000 @kivohin