scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-30 19:08:03 -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 {selectIsEducator} from '../../../redux/session';
import AlertProvider from '../../../components/alert/alert-provider.jsx'; import AlertProvider from '../../../components/alert/alert-provider.jsx';
import Alert from '../../../components/alert/alert.jsx'; import Alert from '../../../components/alert/alert.jsx';
import Spinner from '../../../components/spinner/spinner.jsx';
const UserProjectsModal = ({ const UserProjectsModal = ({
items, error, loading, moreToLoad, showStudentsFilter, items, error, loading, moreToLoad, showStudentsFilter,
@ -77,7 +78,7 @@ const UserProjectsModal = ({
<AlertProvider> <AlertProvider>
{error && <div>Error loading {filter}: {error}</div>} {error && <div>Error loading {filter}: {error}</div>}
<Alert className="studio-alert" /> <Alert className="studio-alert" />
{items.length > 0 ? ( {items.length > 0 &&
<React.Fragment> <React.Fragment>
<div className="user-projects-modal-grid"> <div className="user-projects-modal-grid">
{items.map(project => ( {items.map(project => (
@ -105,7 +106,8 @@ const UserProjectsModal = ({
</div> </div>
} }
</React.Fragment> </React.Fragment>
) : }
{!loading && items.length === 0 &&
<div className="studio-projects-empty"> <div className="studio-projects-empty">
<img <img
src="/svgs/studio/add-to-studio-empty.svg" src="/svgs/studio/add-to-studio-empty.svg"
@ -122,6 +124,12 @@ const UserProjectsModal = ({
</div> </div>
</div> </div>
} }
{loading &&
<Spinner
className="studio-projects-spinner"
color="blue"
/>
}
</AlertProvider> </AlertProvider>
</ModalInnerContent> </ModalInnerContent>
<div className="studio-projects-done-row"> <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; line-height: 1.5rem;
margin-top: 1rem; margin-top: 1rem;
} }
.studio-projects-spinner {
margin: auto;
}
} }
.studio-tile-added { .studio-tile-added {