scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 17:45:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

add loading spinner

Browse source
This commit is contained in:
Eric Rosenbaum 2021-06-15 15:35:25 -04:00
parent cbbd0ebdaf
commit 7c0ec57165
2 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/views/studio/modals/user-projects-modal.jsx
View file

@ -20,6 +20,7 @@ import './user-projects-modal.scss';
import {selectIsEducator} from '../../../redux/session';
import AlertProvider from '../../../components/alert/alert-provider.jsx';
import Alert from '../../../components/alert/alert.jsx';
import Spinner from '../../../components/spinner/spinner.jsx';
const UserProjectsModal = ({
items, error, loading, moreToLoad, showStudentsFilter,
@ -77,7 +78,7 @@ const UserProjectsModal = ({
<AlertProvider>
{error && <div>Error loading {filter}: {error}</div>}
<Alert className="studio-alert" />
{items.length > 0 ? (
{items.length > 0 &&
<React.Fragment>
<div className="user-projects-modal-grid">
{items.map(project => (
@ -105,7 +106,8 @@ const UserProjectsModal = ({
</div>
}
</React.Fragment>
) :
}
{!loading && items.length === 0 &&
<div className="studio-projects-empty">
<img
src="/svgs/studio/add-to-studio-empty.svg"
@ -122,6 +124,12 @@ const UserProjectsModal = ({
</div>
</div>
}
{loading &&
<Spinner
className="studio-projects-spinner"
color="blue"
/>
}
</AlertProvider>
</ModalInnerContent>
<div className="studio-projects-done-row">

4
src/views/studio/modals/user-projects-modal.scss
View file

@ -55,6 +55,10 @@
line-height: 1.5rem;
margin-top: 1rem;
}
.studio-projects-spinner {
margin: auto;
}
}
.studio-tile-added {