Skip to content

Conversation

@arizakevin
Copy link

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

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.

2 participants