Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8d8220b

Browse files
authored
chore: add stories forLoader (#12445)
1 parent1e17782 commit8d8220b

File tree

11 files changed

+67
-52
lines changed

11 files changed

+67
-52
lines changed

‎site/src/components/ErrorBoundary/RuntimeErrorState.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Helmet } from "react-helmet-async";
77
importtype{BuildInfoResponse}from"api/typesGenerated";
88
import{CopyButton}from"components/CopyButton/CopyButton";
99
import{CoderIcon}from"components/Icons/CoderIcon";
10-
import{FullScreenLoader}from"components/Loader/FullScreenLoader";
10+
import{Loader}from"components/Loader/Loader";
1111
import{Margins}from"components/Margins/Margins";
1212
import{Stack}from"components/Stack/Stack";
1313

@@ -50,7 +50,9 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
5050
<Helmet>
5151
<title>Something went wrong...</title>
5252
</Helmet>
53-
{!checkingError ?(
53+
{checkingError ?(
54+
<Loaderfullscreen/>
55+
) :(
5456
<Marginscss={styles.root}>
5557
<divcss={{width:"100%"}}>
5658
<CoderIconcss={styles.logo}/>
@@ -109,8 +111,6 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
109111
)}
110112
</div>
111113
</Margins>
112-
) :(
113-
<FullScreenLoader/>
114114
)}
115115
</>
116116
);

‎site/src/components/Loader/FullScreenLoader.tsx

Lines changed: 0 additions & 23 deletions
This file was deleted.
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{Loader}from"./Loader";
3+
4+
constmeta:Meta<typeofLoader>={
5+
title:"components/Loader",
6+
component:Loader,
7+
};
8+
9+
exportdefaultmeta;
10+
typeStory=StoryObj<typeofLoader>;
11+
12+
exportconstExample:Story={};
13+
14+
exportconstFullscreen:Story={
15+
args:{
16+
fullscreen:true,
17+
},
18+
};

‎site/src/components/Loader/Loader.tsx

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,45 @@
1+
importtype{Interpolation,Theme}from"@emotion/react";
12
importCircularProgressfrom"@mui/material/CircularProgress";
23
importtype{FC,HTMLAttributes}from"react";
34

45
interfaceLoaderPropsextendsHTMLAttributes<HTMLDivElement>{
6+
fullscreen?:boolean;
57
size?:number;
68
}
79

8-
exportconstLoader:FC<LoaderProps>=({ size=26, ...attrs})=>{
10+
exportconstLoader:FC<LoaderProps>=({
11+
fullscreen,
12+
size=26,
13+
...attrs
14+
})=>{
915
return(
1016
<div
11-
css={{
12-
padding:32,
13-
width:"100%",
14-
display:"flex",
15-
alignItems:"center",
16-
justifyContent:"center",
17-
}}
17+
css={fullscreen ?styles.fullscreen :styles.inline}
1818
data-testid="loader"
19-
data-chromatic="ignore"
2019
{...attrs}
2120
>
2221
<CircularProgresssize={size}/>
2322
</div>
2423
);
2524
};
25+
26+
conststyles={
27+
inline:{
28+
padding:32,
29+
width:"100%",
30+
display:"flex",
31+
alignItems:"center",
32+
justifyContent:"center",
33+
},
34+
fullscreen:(theme)=>({
35+
position:"absolute",
36+
top:"0",
37+
left:"0",
38+
right:"0",
39+
bottom:"0",
40+
display:"flex",
41+
justifyContent:"center",
42+
alignItems:"center",
43+
background:theme.palette.background.default,
44+
}),
45+
}satisfiesRecord<string,Interpolation<Theme>>;

‎site/src/contexts/auth/RequireAuth.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import axios from "axios";
22
import{typeFC,useEffect}from"react";
33
import{Outlet,Navigate,useLocation}from"react-router-dom";
44
import{isApiError}from"api/errors";
5-
import{FullScreenLoader}from"components/Loader/FullScreenLoader";
5+
import{Loader}from"components/Loader/Loader";
66
import{ProxyProvider}from"contexts/ProxyContext";
77
import{DashboardProvider}from"modules/dashboard/DashboardProvider";
88
import{embedRedirect}from"utils/redirect";
@@ -43,7 +43,7 @@ export const RequireAuth: FC = () => {
4343
},[isLoading,isSigningOut,isSignedIn,signOut]);
4444

4545
if(isLoading||isSigningOut){
46-
return<FullScreenLoader/>;
46+
return<Loaderfullscreen/>;
4747
}
4848

4949
if(isSignedOut){

‎site/src/modules/dashboard/DashboardProvider.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import type {
1717
Experiments,
1818
}from"api/typesGenerated";
1919
import{displayError}from"components/GlobalSnackbar/utils";
20-
import{FullScreenLoader}from"components/Loader/FullScreenLoader";
20+
import{Loader}from"components/Loader/Loader";
2121
import{hslToHex,isHexColor,isHslColor}from"utils/colors";
2222

2323
interfaceAppearance{
@@ -78,7 +78,7 @@ export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
7878
},[]);
7979

8080
if(isLoading){
81-
return<FullScreenLoader/>;
81+
return<Loaderfullscreen/>;
8282
}
8383

8484
return(

‎site/src/pages/CliAuthPage/CliAuthPageView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { visuallyHidden } from "@mui/utils";
33
importtype{FC}from"react";
44
import{LinkasRouterLink}from"react-router-dom";
55
import{CodeExample}from"components/CodeExample/CodeExample";
6-
import{FullScreenLoader}from"components/Loader/FullScreenLoader";
6+
import{Loader}from"components/Loader/Loader";
77
import{SignInLayout}from"components/SignInLayout/SignInLayout";
88
import{Welcome}from"components/Welcome/Welcome";
99

@@ -15,7 +15,7 @@ const VISUALLY_HIDDEN_SPACE = " ";
1515

1616
exportconstCliAuthPageView:FC<CliAuthPageViewProps>=({ sessionToken})=>{
1717
if(!sessionToken){
18-
return<FullScreenLoader/>;
18+
return<Loaderfullscreen/>;
1919
}
2020

2121
return(

‎site/src/pages/SetupPage/SetupPage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Helmet } from "react-helmet-async";
33
import{useMutation}from"react-query";
44
import{Navigate,useNavigate}from"react-router-dom";
55
import{createFirstUser}from"api/queries/users";
6-
import{FullScreenLoader}from"components/Loader/FullScreenLoader";
6+
import{Loader}from"components/Loader/Loader";
77
import{useAuth}from"contexts/auth/useAuth";
88
import{pageTitle}from"utils/page";
99
import{SetupPageView}from"./SetupPageView";
@@ -21,7 +21,7 @@ export const SetupPage: FC = () => {
2121
constnavigate=useNavigate();
2222

2323
if(isLoading){
24-
return<FullScreenLoader/>;
24+
return<Loaderfullscreen/>;
2525
}
2626

2727
// If the user is logged in, navigate to the app

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import type {
1717
TemplateVersion,
1818
}from"api/typesGenerated";
1919
import{displayError}from"components/GlobalSnackbar/utils";
20-
import{FullScreenLoader}from"components/Loader/FullScreenLoader";
20+
import{Loader}from"components/Loader/Loader";
2121
import{useOrganizationId}from"contexts/auth/useOrganizationId";
2222
import{useWatchVersionLogs}from"modules/templates/useWatchVersionLogs";
2323
import{typeFileTree,traverse}from"utils/filetree";
@@ -120,7 +120,9 @@ export const TemplateVersionEditorPage: FC = () => {
120120
<title>{pageTitle(`${templateName} · Template Editor`)}</title>
121121
</Helmet>
122122

123-
{templateQuery.data&&templateVersionQuery.data&&fileTree ?(
123+
{!(templateQuery.data&&templateVersionQuery.data&&fileTree) ?(
124+
<Loaderfullscreen/>
125+
) :(
124126
<TemplateVersionEditor
125127
activePath={activePath}
126128
onActivePathChange={onActivePathChange}
@@ -223,8 +225,6 @@ export const TemplateVersionEditorPage: FC = () => {
223225
setProvisionerTags(tags);
224226
}}
225227
/>
226-
) :(
227-
<FullScreenLoader/>
228228
)}
229229
</>
230230
);

‎site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import type {
1818
import{ErrorAlert}from"components/Alert/ErrorAlert";
1919
import{Avatar}from"components/Avatar/Avatar";
2020
import{AvatarData}from"components/AvatarData/AvatarData";
21-
import{FullScreenLoader}from"components/Loader/FullScreenLoader";
21+
import{Loader}from"components/Loader/Loader";
2222
import{
2323
MoreMenu,
2424
MoreMenuContent,
@@ -52,7 +52,7 @@ export const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
5252
}
5353

5454
if(isLoading||!auths){
55-
return<FullScreenLoader/>;
55+
return<Loaderfullscreen/>;
5656
}
5757

5858
return(

‎site/src/router.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
Outlet,
77
Route,
88
}from"react-router-dom";
9-
import{FullScreenLoader}from"./components/Loader/FullScreenLoader";
9+
import{Loader}from"./components/Loader/Loader";
1010
import{RequireAuth}from"./contexts/auth/RequireAuth";
1111
import{DashboardLayout}from"./modules/dashboard/DashboardLayout";
1212
importAuditPagefrom"./pages/AuditPage/AuditPage";
@@ -243,7 +243,7 @@ const ProvisionerDaemonsHealthPage = lazy(
243243

244244
constRoutesWithSuspense=()=>{
245245
return(
246-
<Suspensefallback={<FullScreenLoader/>}>
246+
<Suspensefallback={<Loaderfullscreen/>}>
247247
<Outlet/>
248248
</Suspense>
249249
);

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp