-
Notifications
You must be signed in to change notification settings - Fork 173
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
[JSX] Add Loading Bar for Progressive Loading UI #9401
base: main
Are you sure you want to change the base?
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||
---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,56 @@ | ||||||||
import React from 'react'; | ||||||||
|
||||||||
interface LoadingBarProps { | ||||||||
progress: number; // Expect progress to be a number | ||||||||
HenriRabalais marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||
} | ||||||||
|
||||||||
/** | ||||||||
* LoadingBar is a React component that displays a progress bar to indicate | ||||||||
* loading status. | ||||||||
* | ||||||||
* @param {number} progress - A number representing the loading progress (0 to | ||||||||
* 100). | ||||||||
Comment on lines
+13
to
+14
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This doc comment suggests that
Suggested change
In general, I think param/return doc comments are often redundant when we have typing enabled (although encouraged / mandatory for our CI, so no problem for this PR !), I'll try to discuss that at the next LORIS meeting. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Agreed on the redundancy of typing in docs — I didn't type 'prop' because that feels opaque and what feels relevant to be documented are the actual attributes of the props object. How would you suggest I document it? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. According to the JSDoc documentation, you should have one line for Alternatively, if you're patient enough, I'll push for the removal of the |
||||||||
* | ||||||||
* @returns {JSX.Element|null} - Returns a Loading Bar React component if | ||||||||
* progress is valid, otherwise null. | ||||||||
*/ | ||||||||
const LoadingBar: React.FC<LoadingBarProps> = ({progress}) => { | ||||||||
const wrapperStyle: React.CSSProperties = { | ||||||||
margin: '50px 0', | ||||||||
}; | ||||||||
|
||||||||
const containerStyles: React.CSSProperties = { | ||||||||
height: '5px', | ||||||||
backgroundColor: '#e0e0de', | ||||||||
borderRadius: '50px', | ||||||||
overflow: 'hidden', | ||||||||
}; | ||||||||
|
||||||||
const fillerStyles: React.CSSProperties = { | ||||||||
height: '100%', | ||||||||
width: `${progress}%`, | ||||||||
backgroundColor: '#E89A0C', | ||||||||
borderRadius: 'inherit', | ||||||||
textAlign: 'right', | ||||||||
transition: 'width 1s linear', | ||||||||
}; | ||||||||
|
||||||||
const progressBar = progress >= 0 ? ( | ||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Shouldn't this always be There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hmm, yeah — if I recall correctly this was probably to offload some of the responsibility of revealing and hiding the component from any potential parent onto the component itself. If you don't think that's a good idea I will remove this line and make sure any parent that is using it is responsible for showing and hiding it. Which, in this case, FilterableDataTable is already doing. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. IMO after the check to ensure |
||||||||
<div | ||||||||
style={wrapperStyle} | ||||||||
role="progressbar" | ||||||||
aria-valuenow={progress} | ||||||||
aria-valuemin={0} | ||||||||
aria-valuemax={100} | ||||||||
> | ||||||||
<h5 className="animate-flicker" aria-live="polite">Loading...</h5> | ||||||||
<div style={containerStyles}> | ||||||||
<div style={fillerStyles} /> | ||||||||
</div> | ||||||||
</div> | ||||||||
) : null; | ||||||||
|
||||||||
return progressBar; | ||||||||
}; | ||||||||
|
||||||||
export default LoadingBar; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a reason you removed all these line breaks in this file ? You seem to have them in your new doc comments.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no, must have been an accident or done absent-mindedly — or it was done by linting? honestly not sure.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Okay, just (un)remove them then !