Loading state in button till events fetches

[satyam73]

Issue Description

Currently while the API for events if being fetched the button text is not shown, as a result button moves little up which is not a good UI/UX. The button text is shown based on the condition of the events API.

Expected Behavior

We need to show a loading text till the new text comes based on the condition of API result.

Current Behavior

Currently while the API for events if being fetched the button text is not shown. The button text is shown based on the condition of the events API.

Screenshots

Button without any text is moving to the top, this should be fixed

Reproducibility

• [ ] This issue is reproducible
• [ ] This issue is not reproducible

Steps to Reproduce

• Go to /live with feature flag dev=true
• Try joining with guest role, you will see the issue there.

Severity/Priority

• [ ] Critical
• [ ] High
• [ ] Medium
• [ ] Low

Additional Information

n/a

Checklist

• [ ] I have read and followed the project's code of conduct.
• [ ] I have searched for similar issues before creating this one.
• [ ] I have provided all the necessary information to understand and reproduce the issue.
• [ ] I am willing to contribute to the resolution of this issue.

---

Thank you for contributing to our project! We appreciate your help in improving it.