Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add loading animation #232

Closed
wants to merge 3 commits into from

Conversation

NihalRadhakrishna
Copy link
Contributor

What

  • created Loader component
  • where ever there is loading text replaced with Loader component.

Fixes bug(s)

Part of

@@ -0,0 +1,20 @@
import React from "react";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is ok to replace the 'loading...' message with a spinner. But for the moment I'd say we could just use the CircularProgress directly, without the need for a wrapper, this gives us more control on the spacing, size, etc. Please instead of importing this component, use the CircularProgress.

return (
<Box
sx={{
width: "100%",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this width:100% needed? from what I could see it is a div by default

sx={{
width: "100%",
textAlign: "center",
py: 10,
Copy link
Collaborator

@nobeeakon nobeeakon Feb 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please when replacing the Loader component adapt the margins to the places where used, for example, having py:10 feels like a lot of space in the children or parent list. Also, may be better to use my.

width: "100%",
textAlign: "center",
py: 10,
m: 0,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it needed to override the margins to 0?

@NihalRadhakrishna
Copy link
Contributor Author

Sorry for the unnecessary css! I have made the changes you suggested. Also reduced margin value in child components.

@NihalRadhakrishna NihalRadhakrishna requested review from nobeeakon and removed request for aadarsh-ram and diivi February 23, 2023 18:30
@aadarsh-ram
Copy link
Collaborator

@NihalRadhakrishna I think the Errors page loader, has still not be changed. Please do check that out.
There seems to be two loader components for the "entry" page. Please remove the loader wherever necessary.

@@ -87,9 +88,14 @@ const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
}
if (isPending) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nobeeakon I am taking this PR
I can see the 2 loading spins when we want to edit a node.
Do we want a circular progress when we are waiting for children and parents ? Or do we only need a circular progress for the whole page ?
I ask these questions to know if I delete these circular progress components in ListEntryChildren and ListEntryParents. If we want to keep them, we will display both of them or do we only want one for both lists ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Piv94165 let's keep it simple ! Spinners are not the main UX blocker right now ;-)

@alexgarel
Copy link
Member

I close, this was resolved here : #232

@alexgarel alexgarel closed this Nov 23, 2023
@alexgarel
Copy link
Member

BTW thanks @NihalRadhakrishna for participating :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants