Skip to content

Commit fb8899c

Browse files
tjaniczekTomasz Janiczek
andauthored
docs: screen flash on initial docs load (#3700)
Co-authored-by: Tomasz Janiczek <[email protected]>
1 parent 46b4ceb commit fb8899c

File tree

2 files changed

+83
-14
lines changed

2 files changed

+83
-14
lines changed

docs/src/components/BannerExample.tsx

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -139,15 +139,42 @@ const BannerExample = () => {
139139
);
140140
};
141141

142-
export default function WithProvider() {
142+
const Shimmer = () => {
143+
/* Docusaurus won't call StyleSheet.create() server-side */
144+
/* eslint-disable react-native/no-inline-styles, react-native/no-color-literals */
145+
146+
return (
147+
<View
148+
style={{
149+
display: 'flex',
150+
minHeight: 500,
151+
borderWidth: 1,
152+
borderColor: 'rgba(125, 82, 96, 0.4)',
153+
borderStyle: 'solid',
154+
borderRadius: 40,
155+
alignContent: 'center',
156+
justifyContent: 'center',
157+
padding: 30,
158+
marginTop: 36,
159+
marginBottom: 32,
160+
}}
161+
/>
162+
);
163+
};
164+
165+
const ThemedBannerExample = () => {
143166
const isDarkTheme = useColorMode().colorMode === 'dark';
144167
return (
145-
<BrowserOnly fallback={<ProgressBar indeterminate />}>
146-
{() => (
147-
<Provider theme={isDarkTheme ? DarkTheme : DefaultTheme}>
148-
<BannerExample />
149-
</Provider>
150-
)}
168+
<Provider theme={isDarkTheme ? DarkTheme : DefaultTheme}>
169+
<BannerExample />
170+
</Provider>
171+
);
172+
};
173+
174+
export default function ClientSideBannerExample() {
175+
return (
176+
<BrowserOnly fallback={<Shimmer />}>
177+
{() => <ThemedBannerExample />}
151178
</BrowserOnly>
152179
);
153180
}

docs/src/components/GetStartedButtons.tsx

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,57 @@ const GetStartedButton = () => {
5151
);
5252
};
5353

54-
export default function WithProvider() {
54+
const Shimmer = () => {
55+
/* Docusaurus won't call StyleSheet.create() server-side */
56+
/* eslint-disable react-native/no-inline-styles, react-native/no-color-literals */
57+
58+
return (
59+
<View
60+
style={{
61+
display: 'flex',
62+
flexDirection: 'row',
63+
justifyContent: 'center',
64+
paddingBottom: 18,
65+
}}
66+
>
67+
<View
68+
style={{
69+
width: 121,
70+
marginRight: 16,
71+
borderWidth: 1,
72+
borderColor: 'rgba(125, 82, 96, 0.4)',
73+
borderStyle: 'solid',
74+
borderRadius: 40,
75+
height: 40,
76+
}}
77+
/>
78+
<View
79+
style={{
80+
width: 132,
81+
borderWidth: 1,
82+
borderColor: 'rgba(125, 82, 96, 0.4)',
83+
borderStyle: 'solid',
84+
borderRadius: 40,
85+
height: 40,
86+
}}
87+
/>
88+
</View>
89+
);
90+
};
91+
92+
const ThemedGetStarted = () => {
5593
const isDarkTheme = useColorMode().colorMode === 'dark';
5694
return (
57-
<BrowserOnly>
58-
{() => (
59-
<Provider theme={isDarkTheme ? DarkTheme : DefaultTheme}>
60-
<GetStartedButton />
61-
</Provider>
62-
)}
95+
<Provider theme={isDarkTheme ? DarkTheme : DefaultTheme}>
96+
<GetStartedButton />
97+
</Provider>
98+
);
99+
};
100+
101+
export default function ClientSideGetStarted() {
102+
return (
103+
<BrowserOnly fallback={<Shimmer />}>
104+
{() => <ThemedGetStarted />}
63105
</BrowserOnly>
64106
);
65107
}

0 commit comments

Comments
 (0)