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.

Sign up for GitHub

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

Chris_spinning_wheel_date_change_reports #2298

Merged
merged 4 commits into from
Jun 29, 2024
Merged

Chris_spinning_wheel_date_change_reports #2298

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
245d84e
spinning_wheel_added_for_people_and_project_report
chrischenlixing May 30, 2024
c0a93c4
optimize frontend rendering speed
chrischenlixing Jun 1, 2024
b64ca78
change date format
chrischenlixing Jun 8, 2024
2900338
change variable naming
chrischenlixing Jun 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/components/Reports/TotalReport/TotalPeopleReport.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ function TotalPeopleReport(props) {
const { startDate, endDate, userProfiles, darkMode } = props;
const [dataLoading, setDataLoading] = useState(true);
const [dataRefresh, setDataRefresh] = useState(false);
const [dataReady, setDataReady] = useState(false);
Copy link
Contributor

Choose a reason for hiding this comment

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

Perhaps it's better to name the state variable as specific as possible for better code readability and user experience.
For example, instead of dataReady , we could have totalPeopleReportDataReady or something along the lines of that. This would effectively convey the proper idea behind the state variable.

const [showTotalPeopleTable, setShowTotalPeopleTable] = useState(false);
const [allTimeEntries, setAllTimeEntries] = useState([]);
const [allPeople, setAllPeople] = useState([]);
Expand Down Expand Up @@ -163,6 +164,7 @@ function TotalPeopleReport(props) {
};

useEffect(() => {
setDataReady(false);
const controller = new AbortController();
loadTimeEntriesForPeriod(controller).then(() => {
setDataLoading(false);
Expand All @@ -180,6 +182,7 @@ function TotalPeopleReport(props) {
setAllPeople(contributedUsers);
checkPeriodForSummary();
setDataRefresh(false);
setDataReady(true);
}
}, [dataRefresh]);

Expand Down Expand Up @@ -275,7 +278,7 @@ function TotalPeopleReport(props) {

return (
<div>
{dataLoading ? (
{!dataReady? (
<Loading align="center" darkMode={darkMode}/>
) : (
<div>
Expand Down
5 changes: 4 additions & 1 deletion src/components/Reports/TotalReport/TotalProjectReport.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Loading from '../../common/Loading';
function TotalProjectReport(props) {
const [dataLoading, setDataLoading] = useState(true);
const [dataRefresh, setDataRefresh] = useState(false);
const [dataReady, setDataReady] = useState(false);
const [showTotalProjectTable, setShowTotalProjectTable] = useState(false);
const [allTimeEntries, setAllTimeEntries] = useState([]);
const [allProject, setAllProject] = useState([]);
Expand Down Expand Up @@ -174,6 +175,7 @@ function TotalProjectReport(props) {
};

useEffect(() => {
setDataReady(false);
loadTimeEntriesForPeriod().then(() => {
setDataLoading(false);
setDataRefresh(true);
Expand All @@ -189,6 +191,7 @@ function TotalProjectReport(props) {
setAllProject(contributedProjects);
checkPeriodForSummary();
setDataRefresh(false);
setDataReady(true);
}
}, [dataRefresh]);

Expand Down Expand Up @@ -287,7 +290,7 @@ function TotalProjectReport(props) {

return (
<div>
{dataLoading ? (
{!dataReady ? (
<Loading align="center" darkMode={darkMode}/>
Copy link
Contributor

Choose a reason for hiding this comment

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

The Loading animation can be centered Vertically around the mid area point of the div bar. It works correctly around the X-axis.

) : (
<div>
Expand Down
Loading