From ae6335eddc06c04d4e975a813329f572a8324595 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 21 Jun 2021 19:57:24 -0700 Subject: [PATCH] [UX] Fix SchemaAddFieldModal stuttering on first new schema field add - With the new template, transitioning from the empty state to the filled schema state causes the modal to stutter due to the component rerender - Changing the page to not instantly react/update `hasSchema` when local schema state changes but instead to wait for the server call to finish and for cachedSchema to update fixes the UX problem --- .../app_search/components/schema/schema_logic.test.ts | 8 ++++---- .../app_search/components/schema/schema_logic.ts | 5 ++++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.test.ts index 7687296cf9f830..dcc5747b0d32f3 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.test.ts +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.test.ts @@ -140,13 +140,13 @@ describe('SchemaLogic', () => { describe('selectors', () => { describe('hasSchema', () => { - it('returns true when the schema obj has items', () => { - mountAndSetSchema({ schema: { test: SchemaType.Text } }); + it('returns true when the cached server schema obj has items', () => { + mount({ cachedSchema: { test: SchemaType.Text } }); expect(SchemaLogic.values.hasSchema).toEqual(true); }); - it('returns false when the schema obj is empty', () => { - mountAndSetSchema({ schema: {} }); + it('returns false when the cached server schema obj is empty', () => { + mount({ schema: {} }); expect(SchemaLogic.values.hasSchema).toEqual(false); }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.ts index 3215a46c8e2998..3dcafd6782afd7 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.ts +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/schema_logic.ts @@ -108,7 +108,10 @@ export const SchemaLogic = kea>({ ], }, selectors: { - hasSchema: [(selectors) => [selectors.schema], (schema) => Object.keys(schema).length > 0], + hasSchema: [ + (selectors) => [selectors.cachedSchema], + (cachedSchema) => Object.keys(cachedSchema).length > 0, + ], hasSchemaChanged: [ (selectors) => [selectors.schema, selectors.cachedSchema], (schema, cachedSchema) => !isEqual(schema, cachedSchema),