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

Jump to bottom

✨ feat(loading-components.tsx): delayed Rendering #82

Closed
wants to merge 0 commits into from
Closed

✨ feat(loading-components.tsx): delayed Rendering #82

wants to merge 0 commits into from

Conversation

Ktbch
Copy link
Contributor

@Ktbch Ktbch commented Jul 4, 2024

added Delayed rendering to the loading component

Pull Request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no API changes)
  • Build-related changes
  • Documentation content changes
  • Tests
  • Other (please describe):

What is the current behavior?

Issue Number: N/A

What is the new behavior?

  • The app waits for 500ms before the rendering the loading components
  • on fast internet connections the loading components would not show

Does this introduce a breaking change?

  • Yes
  • No

Other information

@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@Ktbch
Copy link
Contributor Author

Ktbch commented Jul 4, 2024

ADDED DELAY RENDERING TO THE LOADING COMPONENTS

thrownullexception
thrownullexception reviewed Jul 5, 2024
View reviewed changes
src/components/app/loading-component.tsx Outdated

React.useEffect(() => {
setTimeout(() => setDelayed(false), 500);
}, []);
Copy link
Contributor

Choose a reason for hiding this comment

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

can we have a setimeout

src/components/app/loading-component.tsx Outdated
@@ -3,13 +3,19 @@ import { Loader } from "react-feather";
import { cn } from "@/lib/utils";

export function ComponentIsLoading({ fullPage }: { fullPage: boolean }) {
const [delayed, setDelayed] = React.useState(true);
Copy link
Contributor

Choose a reason for hiding this comment

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

Can use the useToggle here

src/components/app/loading-component.tsx Outdated
const [delayed, setDelayed] = React.useState(true);

React.useEffect(() => {
setTimeout(() => setDelayed(false), 500);
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we also move this 500 to a variable to facilitate easy changing

src/components/app/loading-component.tsx Outdated
return (
<div
className={cn("flex justify-center items-center w-full h-full", {
"w-lvw h-lvh": fullPage,
})}
>
<Loader className="animate-spin w-8 h-8 text-primary" />
{!delayed && <Loader className="animate-spin w-8 h-8 text-primary" />}
Copy link
Contributor

Choose a reason for hiding this comment

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

The delayed logic should cover the whole component

src/components/app/loading-component.tsx Outdated
return (
<div
className={cn("flex justify-center items-center w-full h-full", {
"w-lvw h-lvh": fullPage,
})}
>
<Loader className="animate-spin w-8 h-8 text-primary" />
{!delayed && <Loader className="animate-spin w-8 h-8 text-primary" />}
Copy link
Contributor

Choose a reason for hiding this comment

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

And it would also be nice if we could turn on and off the delayed-ness, not sure it is very loading component that will need it, so we should have room for those that wont need it:
a suggestion is that we have a the wait prop will have default value, This way we can have something like this

<Delayed wait={500}>
<ComponentIsLoading />
</Delayed>

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Got it

@Ktbch
Copy link
Contributor Author

Ktbch commented Jul 8, 2024 •
edited
Loading

I created a new component. Then modified the changes according to the requirements
Provided

@Ktbch Ktbch closed this Jul 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thrownullexception thrownullexception thrownullexception left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@Ktbch @CLAassistant @thrownullexception