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

WRO-3893: Fixed React 18 Suspense sample content is not loading inside all-samples app #171

Merged
merged 8 commits into from May 18, 2022
Merged

WRO-3893: Fixed React 18 Suspense sample content is not loading inside all-samples app #171

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5cf3714
Refactored Suspense sample to work inside all-samples
stanca-pop-lgp May 17, 2022
4fee108
removed unused import
stanca-pop-lgp May 17, 2022
1784e16
changed data size
stanca-pop-lgp May 17, 2022
4e8ec60
Merge branch 'develop' of github.com:enactjs/samples into feature/WRO…
stanca-pop-lgp May 17, 2022
30ff067
sorted imports
stanca-pop-lgp May 17, 2022
3733612
review fixes
stanca-pop-lgp May 17, 2022
41b681e
fixed lint warning
stanca-pop-lgp May 17, 2022
3849c26
fixed lint warnings
stanca-pop-lgp May 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions sandstone/pattern-react18-new/src/App/App.js
View file
Open in desktop
Expand Up @@ -14,13 +14,13 @@ const App = (props) => {
<div {...props} className={classnames(props.className, css.app)}>
<Header noCloseButton title="React 18 Features" type="mini" />
<TabLayout orientation="horizontal" className={css.tabLayout}>
<Tab className={css.tab} title="Automatic Batching">
<Tab title="Automatic Batching">
<Batching />
</Tab>
<Tab className={css.tab} title="Suspense">
<Tab title="Suspense">
<Suspense />
</Tab>
<Tab className={css.tab} title="useTransition">
<Tab title="useTransition">
<UseTransition />
</Tab>
</TabLayout>
Expand Down
24 changes: 24 additions & 0 deletions sandstone/pattern-react18-new/src/views/Suspense/NoSuspense.js
View file
Open in desktop
@@ -0,0 +1,24 @@
import React, {useEffect, useState} from 'react';
stanca-pop-lgp marked this conversation as resolved.
Show resolved Hide resolved

import SamplePage from './SamplePage';

const NoSuspense = () => {
const [loading, setLoading] = useState(true);

useEffect(() => {
setTimeout(() => setLoading(false), 3000);
}, []);

return (
<div>
{
loading ? null :
<div>
<SamplePage/>
</div>
}
</div>
)
}

export default NoSuspense;
2 changes: 1 addition & 1 deletion sandstone/pattern-react18-new/src/views/Suspense/SamplePage.js
View file
Open in desktop
Expand Up @@ -18,7 +18,7 @@ const renderItem = ({index, ...rest}) => {
);
};

for (let i = 0; i < 12; i++) {
for (let i = 0; i < 6; i++) {
const
count = ('0' + i).slice(-2),
caption = `Item ${count} caption`,
Expand Down
4 changes: 2 additions & 2 deletions sandstone/pattern-react18-new/src/views/Suspense/SkeletonPage.js
View file
Open in desktop
Expand Up @@ -16,7 +16,7 @@ const renderItem = () => {
Loading...
</ImageItem>
<Spinner
style={{position: 'absolute', top: '50%', left: '50%', margin: '-63px 0 0 -39px'}}
style={{position: 'absolute', top: '50%', left: '50%', margin: '-20% 0 0 -12%'}}
transparent
/>
</>
Expand All @@ -28,7 +28,7 @@ const SkeletonPage = kind({

render: () => (
<VirtualGridList
dataSize={12}
dataSize={6}
itemRenderer={renderItem}
itemSize={{
minWidth: ri.scale(540),
Expand Down
42 changes: 20 additions & 22 deletions sandstone/pattern-react18-new/src/views/Suspense/Suspense.js
View file
Open in desktop
@@ -1,7 +1,8 @@
import React, {Suspense, useEffect, useState} from 'react';
import Button from '@enact/sandstone/Button';
import {Header, Panel, Panels} from '@enact/sandstone/Panels';
import Heading from '@enact/sandstone/Heading';
import TabLayout, {Tab} from '@enact/sandstone/TabLayout';
import React, {Suspense, useState} from 'react';
stanca-pop-lgp marked this conversation as resolved.
Show resolved Hide resolved

import NoSuspense from './NoSuspense';
import SkeletonPage from './SkeletonPage';

// Load the "SamplePage" component after 3s
Expand All @@ -20,31 +21,28 @@ let SamplePage = getSamplePage();
const SuspensePage = () => {
const [index, setIndex] = useState(0);

useEffect( () => {
// Lazy reload the "SamplePage" component when index changes
const lazyReload = ({index}) => {
stanca-pop-lgp marked this conversation as resolved.
Show resolved Hide resolved
SamplePage = getSamplePage();
}, [index]);

const nextPanel = () => setIndex(index + 1); /* eslint-disable react/jsx-no-bind */
const prevPanel = () => setIndex(index - 1); /* eslint-disable react/jsx-no-bind */
setIndex(index);
};

return (
<Panels index={index} noCloseButton onBack={prevPanel}>
<Panel>
<Header subtitle="Suspense offers a fallback UI for better user experience. Check out next panel." type="mini">
<slotAfter>
<Button size="small" icon="arrowlargeright" onClick={nextPanel} />
</slotAfter>
</Header>
<TabLayout index={index} onSelect={lazyReload} orientation="horizontal">
<Tab title="Using Suspense">
<Heading>
Suspense offers a fallback UI for better user experience.
</Heading>
<Suspense fallback={<SkeletonPage />}>
<SamplePage />
</Suspense>
</Panel>
<Panel>
<Header subtitle="Page is empty until all the data is available. Please wait 3s." type="mini" />
<SamplePage />
</Panel>
</Panels>
</Tab>
<Tab title="NOT Using Suspense">
<Heading>
Page is empty until all the data is available. Please wait 3s.
</Heading>
<NoSuspense />
</Tab>
</TabLayout>
);
};

Expand Down