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.

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

🪟 🎉 Load credits consumption separate #18986

Merged
merged 2 commits into from
Nov 5, 2022
Merged

Conversation

timroes
Copy link
Collaborator

@timroes timroes commented Nov 4, 2022

What

The credits page currently loads really slow, because of the consumption queries and connector definition queries we need to execute for the chart and table on the bottom. We should though not block the upper part of the page allowing the user to see their remaining credits and buy new ones, on the slow part on the bottom.

This PR wraps the bottom part in it's own React.Suspense, so its queries won't block the upper part:

screenshot-20221104-212901

@timroes timroes added team/compose area/frontend Related to the Airbyte webapp ui/credits labels Nov 4, 2022
@timroes timroes requested a review from a team as a code owner November 4, 2022 20:37
@github-actions github-actions bot added the area/platform issues related to the platform label Nov 4, 2022
Copy link
Contributor

@ambirdsall ambirdsall left a comment

Choose a reason for hiding this comment

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

No problem with the implementation; only critique is that I'm not quite feeling the horizontal alignment of the spinner and its text. Running the branch, it does load the remaining credits UI significantly faster than master 👍

@@ -7,3 +7,11 @@
.emailVerificationHint {
margin-bottom: variables.$spacing-md;
}

.creditUsageLoading {
display: flex;
Copy link
Contributor

Choose a reason for hiding this comment

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

suggestion: add flex-direction: column; so the text and spinner stack vertically (purely subjective, I just think it looks better that way)

@timroes timroes merged commit 16b240c into master Nov 5, 2022
@timroes timroes deleted the tim/credits-usage-suspend branch November 5, 2022 00:01
letiescanciano added a commit that referenced this pull request Nov 7, 2022
* master: (69 commits)
  🪟 🐛 Fix wrong geography dropdown type #19021
  SAT: basic read on full catalog when `test_strictness_level == high` (#18937)
  Unhide DynamoDB destination (#18994)
  Fixed tests for destination connectors (#19007)
  🐛 Source Facebook Marketing: handle FacebookBadObjectError (#18971)
  Edit multi-cloud docs (#18972)
  🪟 🎉 Load credits consumption separate (#18986)
  Bmoric/extract source api (#18944)
  Migrating InvalidCursorException -> ConfigErrorException  (#18995)
  🪟 🎨 Fix banner link color (#18978)
  Handling configuration exceptions in IntegrationRunner (#18989)
  Add new workspace api endpoint (#18983)
  Add normalization to destination definition and actor definition table (#18300)
  Fix oauth controller (#18981)
  Fix migration dev center schema dump by run db-specific initialization script (#18984)
  fix master build failure (#18982)
  cleanup: delete debezium 1-4-2 module (#18733)
  Remove unused job persistence methods. (#18952)
  Hash filenames of extracted CSS (#18976)
  Fix typo in source code comment DataDaog ==> Datadog (#18911)
  ...
letiescanciano added a commit that referenced this pull request Nov 7, 2022
* master: (73 commits)
  🪟 🐛 Fix wrong geography dropdown type #19021
  SAT: basic read on full catalog when `test_strictness_level == high` (#18937)
  Unhide DynamoDB destination (#18994)
  Fixed tests for destination connectors (#19007)
  🐛 Source Facebook Marketing: handle FacebookBadObjectError (#18971)
  Edit multi-cloud docs (#18972)
  🪟 🎉 Load credits consumption separate (#18986)
  Bmoric/extract source api (#18944)
  Migrating InvalidCursorException -> ConfigErrorException  (#18995)
  🪟 🎨 Fix banner link color (#18978)
  Handling configuration exceptions in IntegrationRunner (#18989)
  Add new workspace api endpoint (#18983)
  Add normalization to destination definition and actor definition table (#18300)
  Fix oauth controller (#18981)
  Fix migration dev center schema dump by run db-specific initialization script (#18984)
  fix master build failure (#18982)
  cleanup: delete debezium 1-4-2 module (#18733)
  Remove unused job persistence methods. (#18952)
  Hash filenames of extracted CSS (#18976)
  Fix typo in source code comment DataDaog ==> Datadog (#18911)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/frontend Related to the Airbyte webapp area/platform issues related to the platform team/compose
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants