Skip to content

Commit e08dc67

Browse files
Almoizs-1310Almoizs-1310
committed
Added loader for better visuability
1 parent a1d1b83 commit e08dc67

4 files changed

Lines changed: 192 additions & 19 deletions

File tree

‎src/client/create-diagram-dialog/components/create-diagram-dialog.tsx‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import { useEffect, useState } from 'react';
22
import { buildUrl, handleDialogClose } from '../../utils/helpers';
33
import { serverFunctions } from '../../utils/serverFunctions';
44
import useAuth from '../../hooks/useAuth';
5-
import { CircularProgress, Container, Typography } from '@mui/material';
5+
import { CircularProgress, Container, Typography, Box } from '@mui/material';
66
import { showAlertDialog } from '../../utils/alert';
77
import LoadingOverlay from '../../components/loading-overlay';
88

99
const CreateDiagramDialog = () => {
1010
const { authState, authStatus } = useAuth();
1111
const [diagramsUrl, setDiagramsUrl] = useState('');
1212
const [isInserting, setIsInserting] = useState(false);
13+
const [iframeLoading, setIframeLoading] = useState(true);
1314

1415
useEffect(() => {
1516
if (!authState?.authorized) return;
@@ -60,18 +61,21 @@ const CreateDiagramDialog = () => {
6061
};
6162
}, [isInserting]);
6263

64+
const handleIframeLoad = () => {
65+
setIframeLoading(false);
66+
};
67+
6368
if (authStatus === 'idle' || authStatus === 'loading') {
6469
return (
6570
<Container
6671
sx={{
6772
display: 'flex',
68-
flexDirection: 'column',
6973
alignItems: 'center',
7074
justifyContent: 'center',
7175
height: '96.5vh',
7276
}}
7377
>
74-
<CircularProgress />
78+
<CircularProgress size={40} />
7579
</Container>
7680
);
7781
}
@@ -87,19 +91,52 @@ const CreateDiagramDialog = () => {
8791
height: '96.5vh',
8892
}}
8993
>
90-
<Typography variant="h5" gutterBottom my={2} textAlign="center">
94+
<Typography variant="h6" gutterBottom textAlign="center">
9195
Error
9296
</Typography>
93-
<Typography paragraph textAlign="center">
97+
<Typography variant="body2" textAlign="center">
9498
Something went wrong. Please try again later.
9599
</Typography>
96100
</Container>
97101
);
98102
}
99103

104+
if (!diagramsUrl) {
105+
return (
106+
<Container
107+
sx={{
108+
display: 'flex',
109+
alignItems: 'center',
110+
justifyContent: 'center',
111+
height: '96.5vh',
112+
}}
113+
>
114+
<CircularProgress size={40} />
115+
</Container>
116+
);
117+
}
118+
100119
return (
101120
<>
102121
{isInserting && <LoadingOverlay />}
122+
{iframeLoading && (
123+
<Box
124+
sx={{
125+
position: 'absolute',
126+
top: 0,
127+
left: 0,
128+
width: '100%',
129+
height: '100%',
130+
display: 'flex',
131+
alignItems: 'center',
132+
justifyContent: 'center',
133+
backgroundColor: 'rgba(255, 255, 255, 0.9)',
134+
zIndex: 1000,
135+
}}
136+
>
137+
<CircularProgress size={40} />
138+
</Box>
139+
)}
103140
<div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
104141
<iframe
105142
src={diagramsUrl}
@@ -111,6 +148,7 @@ const CreateDiagramDialog = () => {
111148
opacity: isInserting ? 0.5 : 1,
112149
pointerEvents: isInserting ? 'none' : 'auto',
113150
}}
151+
onLoad={handleIframeLoad}
114152
/>
115153
</div>
116154
</>

‎src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx‎

Lines changed: 74 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import { buildUrl, handleDialogClose } from '../../utils/helpers';
44
import useAuth from '../../hooks/useAuth';
55
import { showAlertDialog } from '../../utils/alert';
66
import LoadingOverlay from '../../components/loading-overlay';
7+
import { CircularProgress, Container, Typography, Box } from '@mui/material';
78

89
const EditDiagramDialog = () => {
910
const { authState, authStatus } = useAuth();
1011
const [diagramsUrl, setDiagramsUrl] = useState('');
1112
const [isUpdating, setIsUpdating] = useState(false);
13+
const [iframeLoading, setIframeLoading] = useState(true);
1214

1315
useEffect(() => {
1416
if (!authState?.authorized) return;
@@ -77,13 +79,82 @@ const EditDiagramDialog = () => {
7779
};
7880
}, [isUpdating]);
7981

80-
if (authStatus !== 'success' || !diagramsUrl) {
81-
return null;
82+
const handleIframeLoad = () => {
83+
setIframeLoading(false);
84+
};
85+
86+
if (authStatus === 'idle' || authStatus === 'loading') {
87+
return (
88+
<Container
89+
sx={{
90+
display: 'flex',
91+
alignItems: 'center',
92+
justifyContent: 'center',
93+
height: '96.5vh',
94+
}}
95+
>
96+
<CircularProgress size={40} />
97+
</Container>
98+
);
99+
}
100+
101+
if (authStatus === 'error') {
102+
return (
103+
<Container
104+
sx={{
105+
display: 'flex',
106+
flexDirection: 'column',
107+
alignItems: 'center',
108+
justifyContent: 'center',
109+
height: '96.5vh',
110+
}}
111+
>
112+
<Typography variant="h6" gutterBottom textAlign="center">
113+
Error
114+
</Typography>
115+
<Typography variant="body2" textAlign="center">
116+
Something went wrong. Please try again later.
117+
</Typography>
118+
</Container>
119+
);
120+
}
121+
122+
if (!diagramsUrl) {
123+
return (
124+
<Container
125+
sx={{
126+
display: 'flex',
127+
alignItems: 'center',
128+
justifyContent: 'center',
129+
height: '96.5vh',
130+
}}
131+
>
132+
<CircularProgress size={40} />
133+
</Container>
134+
);
82135
}
83136

84137
return (
85138
<>
86139
{isUpdating && <LoadingOverlay />}
140+
{iframeLoading && (
141+
<Box
142+
sx={{
143+
position: 'absolute',
144+
top: 0,
145+
left: 0,
146+
width: '100%',
147+
height: '100%',
148+
display: 'flex',
149+
alignItems: 'center',
150+
justifyContent: 'center',
151+
backgroundColor: 'rgba(255, 255, 255, 0.9)',
152+
zIndex: 1000,
153+
}}
154+
>
155+
<CircularProgress size={40} />
156+
</Box>
157+
)}
87158
<div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
88159
<iframe
89160
src={diagramsUrl}
@@ -95,6 +166,7 @@ const EditDiagramDialog = () => {
95166
opacity: isUpdating ? 0.5 : 1,
96167
pointerEvents: isUpdating ? 'none' : 'auto',
97168
}}
169+
onLoad={handleIframeLoad}
98170
/>
99171
</div>
100172
</>

‎src/client/select-diagram-dialog/components/select-diagram-dialog.tsx‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
22
import { buildUrl, handleDialogClose } from '../../utils/helpers';
33
import { serverFunctions } from '../../utils/serverFunctions';
44
import useAuth from '../../hooks/useAuth';
5-
import { CircularProgress, Container, Typography } from '@mui/material';
5+
import { CircularProgress, Container, Typography, Box } from '@mui/material';
66
import { showAlertDialog } from '../../utils/alert';
77
import LoadingOverlay from '../../components/loading-overlay';
88

@@ -12,6 +12,7 @@ const SelectDiagramDialog = () => {
1212
const { authState, authStatus } = useAuth();
1313
const [diagramsUrl, setDiagramsUrl] = useState('');
1414
const [isInserting, setIsInserting] = useState(false);
15+
const [iframeLoading, setIframeLoading] = useState(true);
1516

1617
useEffect(() => {
1718
if (!authState?.authorized) return;
@@ -69,18 +70,21 @@ const SelectDiagramDialog = () => {
6970
};
7071
}, [isInserting]);
7172

73+
const handleIframeLoad = () => {
74+
setIframeLoading(false);
75+
};
76+
7277
if (authStatus === 'idle' || authStatus === 'loading') {
7378
return (
7479
<Container
7580
sx={{
7681
display: 'flex',
77-
flexDirection: 'column',
7882
alignItems: 'center',
7983
justifyContent: 'center',
8084
height: '96.5vh',
8185
}}
8286
>
83-
<CircularProgress />
87+
<CircularProgress size={40} />
8488
</Container>
8589
);
8690
}
@@ -96,19 +100,52 @@ const SelectDiagramDialog = () => {
96100
height: '96.5vh',
97101
}}
98102
>
99-
<Typography variant="h5" gutterBottom my={2} textAlign="center">
103+
<Typography variant="h6" gutterBottom textAlign="center">
100104
Error
101105
</Typography>
102-
<Typography paragraph textAlign="center">
106+
<Typography variant="body2" textAlign="center">
103107
Something went wrong. Please try again later.
104108
</Typography>
105109
</Container>
106110
);
107111
}
108112

113+
if (!diagramsUrl) {
114+
return (
115+
<Container
116+
sx={{
117+
display: 'flex',
118+
alignItems: 'center',
119+
justifyContent: 'center',
120+
height: '96.5vh',
121+
}}
122+
>
123+
<CircularProgress size={40} />
124+
</Container>
125+
);
126+
}
127+
109128
return (
110129
<>
111130
{isInserting && <LoadingOverlay />}
131+
{iframeLoading && (
132+
<Box
133+
sx={{
134+
position: 'absolute',
135+
top: 0,
136+
left: 0,
137+
width: '100%',
138+
height: '100%',
139+
display: 'flex',
140+
alignItems: 'center',
141+
justifyContent: 'center',
142+
backgroundColor: 'rgba(255, 255, 255, 0.9)',
143+
zIndex: 1000,
144+
}}
145+
>
146+
<CircularProgress size={40} />
147+
</Box>
148+
)}
112149
<div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
113150
<iframe
114151
src={diagramsUrl}
@@ -120,6 +157,7 @@ const SelectDiagramDialog = () => {
120157
opacity: isInserting ? 0.5 : 1,
121158
pointerEvents: isInserting ? 'none' : 'auto',
122159
}}
160+
onLoad={handleIframeLoad}
123161
/>
124162
</div>
125163
</>

0 commit comments

Comments
 (0)