ionic-react-capacitor-course icon indicating copy to clipboard operation
ionic-react-capacitor-course copied to clipboard

Fixed glitchy transition on initial rendering

Open arizakevin opened this issue 2 years ago • 0 comments

Refactored the Login component to delay rendering until the value of the introSeen variable is determined.

By initializing introSeen as null and using conditional rendering based on its boolean values (true/false), we delay the rendering until the checkStorage function determines the value.

To summarize, the key modifications include:

1 - Initializing the introSeen state variable as null:

const [introSeen, setIntroSeen] = useState<boolean | null>(null);

2 - Using conditional rendering based on the introSeen value but checking only actual boolean values:

{introSeen === false ? (
  <Intro onFinish={finishIntro} />
) : (
  introSeen === true && (
    // Login page content
  )
)}

With these changes, the Login page will only render the Intro component if introSeen is false (not null). Once the introSeen value is determined (either true or false) by the checkStorage function, the Login page content will be rendered accordingly.

Also, applied some formatting clean up for better readability and consistency (If this PR is approved I will submit another PR formating all the other files as well).

Evidence (Screen recordings):

Before the fix: https://github.com/saimon24/ionic-react-capacitor-course/assets/56013162/4c5e2f5a-d9b5-4ce2-a330-ff97361e921f

After the fix: https://github.com/saimon24/ionic-react-capacitor-course/assets/56013162/cccac7e0-816a-4b67-b6dc-f5298796972c

arizakevin avatar May 29 '23 16:05 arizakevin