Improve app and org loading states #16984

selfcontained · 2023-03-22T21:38:23Z

Description

Addresses a few things that deal with app loading state, and org loading.

Adds top level ErrorBoundary to catch errors if user or org loading throw errors
- Swapped user loading to a useQuery so errors can get caught in ErrorBoundary. Left UserContext for state management for now, but we can migrate to an exposed useQuery later to get the user.
Extract org billing mode from useOrganizations() query and swap to useOrgBillingMode() query where it was used. This removes having to load every orgs billing mode as a blocking path for the app rendering.
Removed UserContext.billingMode in favor of userUserBillingMode() query
Add a view for <AppLoading/> that shows up if app takes longer than 3 seconds to load.

Related Issue(s)

How to test

Release Notes

NONE

Documentation

Build Options:

/werft with-werft
Run the build with werft instead of GHA
leeway-no-cache
/werft no-test
Run Leeway with --dont-test

Publish Options

/werft publish-to-npm
/werft publish-to-jb-marketplace

Installer Options

with-ee-license
with-dedicated-emulation
with-ws-manager-mk2
workspace-feature-flags
Add desired feature flags to the end of the line above, space separated

Preview Environment Options:

/werft with-local-preview
If enabled this will build install/preview
/werft with-preview
/werft with-large-vm
/werft with-gce-vm
If enabled this will create the environment on GCE infra
/werft with-integration-tests=all
Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh

werft-gitpod-dev-com · 2023-03-22T21:38:33Z

started the job as gitpod-build-bmh-improve-org-loading-states.3 because the annotations in the pull request description changed
(with .werft/ from main)

selfcontained · 2023-03-22T22:39:08Z

components/dashboard/src/hooks/use-analytics-tracking.ts

@@ -13,6 +13,11 @@ export const useAnalyticsTracking = () => {

    // listen and notify Segment of client-side path updates
    useEffect(() => {
+        //store current path to have access to previous when path changes


Moved this into here instead of it being in the user-loader hook for some reason.

selfcontained · 2023-03-22T22:40:05Z

components/dashboard/src/hooks/use-user-loader.ts

Renamed this to just use-user-loader since it doesn't deal with teams anymore. Contents also changed to wrap call in a useQuery().

selfcontained · 2023-03-22T22:41:07Z

components/dashboard/src/teams/OrgSettingsPage.tsx

@@ -58,3 +61,38 @@ export function OrgSettingsPage({ children }: OrgSettingsPageProps) {
        </PageWithSubMenu>
    );
 }
+
+export function getTeamSettingsMenu(params: {


Moved this into here since this is where it's used.

selfcontained · 2023-03-22T22:42:24Z

components/dashboard/src/user-settings/SSHKeys.tsx

-                            No SSH Keys
-                        </Heading2>
-                        <Subheading className="pb-6">
+                <EmptyMessage


[pr-rider] 😄 - Noticed the alignment was all off here, so moved it over to use the new component for rendering these views.

gtsiolis · 2023-03-23T09:10:36Z

Looking at this now! 👀

AlexTugarev

That worked quite nice for me!
Also checked with a throttled connection (at 3G speed)

/hold just in case someone else is looking at it as well, and maybe testing it.

gtsiolis

Thanks, @selfcontained! 🌮 🌮

Left a few minor non-blocking UX comments. We can also merge this and improve the UX later.

Let me know what you think. 🏓

gtsiolis · 2023-03-23T09:14:35Z

components/dashboard/src/app/AppLoading.tsx

+        // Wait 3 seconds before showing the loading screen to avoid flashing it too quickly
+        <Delayed wait={3000}>
+            <div className="flex flex-col justify-center items-center w-full h-screen space-y-4">
+                <img src={gitpodIcon} alt="Gitpod's logo" className={"h-16 flex-shrink-0 animate-bounce"} />


issue: Re-using the bouncing logo could frustrate or confuse users as they usually to see that loading state (bouncing logo) a lot while opening workspaces. Could be worth using something different, as the designs included in #16803. Thoughts?

Ah good point. I could also remove the animation, definitely don't want user's to get confused. I mentioned it below, but I think the small little loading spinner is quite easy to not notice by itself. Would love some personality injected into the product here too 😄

DEAL—Opened #17044 to keep track of the proposal to improve the full-page loading.

gtsiolis · 2023-03-23T09:17:14Z

components/dashboard/src/components/Delayed.tsx

+type Props = {
+    wait?: number;
+};
+export const Delayed: FC<Props> = ({ wait = 1000, children }) => {


suggestion: Not sure if this is the best line to comment about this or if this is already implementing the following: Ideally, we would wait a second or two before showing the full-page loading indicator to avoid having spinners or loading states everywhere. 💡

Yup, I think the same thing. This component is built so we can use it for those loading indicators too, and just wrap them with this. We can do it in the components themselves so we get it for free everywhere..

gtsiolis · 2023-03-23T09:19:31Z

components/dashboard/src/app/AppLoading.tsx

-    return <></>;
+    return (
+        // Wait 3 seconds before showing the loading screen to avoid flashing it too quickly
+        <Delayed wait={3000}>


question: 3 seconds can make the dashboard still feel unresponsive, no? Could it be better to make this 1 or 2 seconds?

Lets try 2. I want to avoid it flashing too quickly, 1 second is pretty easy to bump into even w/ a good connection if there's 1 slow call.

gtsiolis · 2023-03-23T09:23:14Z

components/dashboard/src/app/AppLoading.tsx

+        <Delayed wait={3000}>
+            <div className="flex flex-col justify-center items-center w-full h-screen space-y-4">
+                <img src={gitpodIcon} alt="Gitpod's logo" className={"h-16 flex-shrink-0 animate-bounce"} />
+                <Heading3>Just getting a few more things ready</Heading3>


suggestion: I like the playful message, but what do you think of going with something simpler and less verbose, like a spinner with no text, using the Loader component?

BEFORE AFTER

I'd love something that has some personality to it. Also, that small loading spinner is so easy to miss, I don't even realize it's there. Ideally most people don't see this, but for those that do, it'd be great to brighten the experience a little w/ something that could make them smile.

I think we could improve this in a followup once we find something actionable.

IMO the PR is already a biiig improvement over the status quo 😉

I'll drop the bouncing animation for now to reduce the chance of confusion w/ the workspace start flow, and we can follow up w/ any design/copy updates.

gtsiolis · 2023-03-23T09:27:22Z

components/dashboard/src/app/AppLoading.tsx

+            <div className="flex flex-col justify-center items-center w-full h-screen space-y-4">
+                <img src={gitpodIcon} alt="Gitpod's logo" className={"h-16 flex-shrink-0 animate-bounce"} />
+                <Heading3>Just getting a few more things ready</Heading3>
+                <Subheading>hang in there...</Subheading>


suggestion: If we're keeping the loading message, I'd go with something less verbose and drop the heading above, as this page does not need it.

geropl · 2023-03-23T10:00:26Z

components/dashboard/src/data/setup.tsx

-    const client = new QueryClient();
+    const client = new QueryClient({
+        queryCache: new QueryCache({
+            // log any errors our queries throw


components/dashboard/src/hooks/use-user-loader.ts

geropl · 2023-03-23T10:08:36Z

components/dashboard/src/teams/OrgSettingsPage.tsx


 export interface OrgSettingsPageProps {
    children: React.ReactNode;
 }

 export function OrgSettingsPage({ children }: OrgSettingsPageProps) {
    const org = useCurrentOrg();
+    const orgBillingMode = useOrgBillingMode();


Just wondered if there are any (potential) downsides to splitting this kind of information/API wise: I imagine this way org and orgBillingMode could be out of sync for some render cycles, right? 🤔

Or is it guaranteed that this is guarded by line 42 below (the isLoading checks)?

The loading check will make sure we don't render the UI before we've gotten the org billing mode back. Is there something else you're referring to w/ the org and the billing mode being out of sync?

As an aside, It should also be cheaper to keep the org billing mode up to date if we mutate it now and need to reload it, as we won't have to update every org, and every org's billing mode anymore.

(just a curious question, I don't think we should do anytime about it!)

geropl · 2023-03-23T10:12:56Z

Got some questions just to make sure I understand the trade-offs.
Also, like George's comment about the "bouncing G", but no better idea myself. 🙂

Besides: LGTM, and works nicely as far as I tested! ✔️

selfcontained · 2023-03-23T16:28:13Z

/unhold

selfcontained added 4 commits March 22, 2023 20:29

use separate query for org billing mode

bd1b1a9

remove user billing mode from UserContext

dd59c9b

rename to account for no teams anymore

8be6221

adding content for app loading

a6ee8fd

roboquat added do-not-merge/work-in-progress release-note-none labels Mar 22, 2023

roboquat added the size/L label Mar 22, 2023

selfcontained added 2 commits March 22, 2023 22:34

add top level error boundary

c7cd864

fix empty message layout

5b49d99

roboquat added size/XL and removed size/L labels Mar 22, 2023

adding comment

2b2efab

selfcontained commented Mar 22, 2023

View reviewed changes

selfcontained added 5 commits March 22, 2023 22:42

no need to export

5612b74

don't throw all errors

8ffb53b

adding code to error boundary rendering

2b5c434

default to null instead of undefined

dd937d8

use user state from UserContext for now

c500450

selfcontained marked this pull request as ready for review March 23, 2023 00:21

selfcontained requested a review from a team March 23, 2023 00:21

selfcontained requested a review from gtsiolis as a code owner March 23, 2023 00:21

roboquat removed the do-not-merge/work-in-progress label Mar 23, 2023

github-actions bot added the team: webapp Issue belongs to the WebApp team label Mar 23, 2023

AlexTugarev approved these changes Mar 23, 2023

View reviewed changes

roboquat added the do-not-merge/hold label Mar 23, 2023

gtsiolis approved these changes Mar 23, 2023

View reviewed changes

geropl reviewed Mar 23, 2023

View reviewed changes

components/dashboard/src/hooks/use-user-loader.ts Show resolved Hide resolved

geropl reviewed Mar 23, 2023

View reviewed changes

reduce to 2 seconds, and drop bouncing animation

0b1a677

roboquat removed the do-not-merge/hold label Mar 23, 2023

roboquat merged commit 13db847 into main Mar 23, 2023

roboquat deleted the bmh/improve-org-loading-states branch March 23, 2023 16:29

roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels Mar 24, 2023

gtsiolis mentioned this pull request Mar 27, 2023

Improve the full-page loading indicator #17044

Closed

Improve app and org loading states #16984

Improve app and org loading states #16984

Uh oh!

Conversation

selfcontained commented Mar 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue(s)

How to test

Release Notes

Documentation

Build Options:

Preview Environment Options:

Uh oh!

werft-gitpod-dev-com bot commented Mar 22, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gtsiolis commented Mar 23, 2023 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AlexTugarev left a comment

Choose a reason for hiding this comment

Uh oh!

gtsiolis left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gtsiolis Mar 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gtsiolis Mar 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

geropl commented Mar 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

selfcontained commented Mar 23, 2023

Uh oh!

selfcontained commented Mar 22, 2023 •

edited

Loading

gtsiolis commented Mar 23, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment •

edited

Loading

gtsiolis Mar 23, 2023 •

edited

Loading

gtsiolis Mar 23, 2023 •

edited

Loading

geropl commented Mar 23, 2023 •

edited

Loading