From 8601cfaae2157e54013dad82dbef7663fa9f0ba1 Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@ebsco.com>
Date: Thu, 9 Jun 2022 14:12:23 -0400
Subject: [PATCH 1/3] STCOR-635 wrap pluggable in suspense

Wrap Pluggable's return value in Suspense in order to avoid whole-tree
re-renders, since the whole tree from the components up to the nearest
`<Suspense>` is removed and replaced with its fallback. For us, this is
particularly a problem when a plugin is part of a dropdown menu that
uses calculations to set its position. Because the entire tree will be
unmounted, the calculations all return zero, resulting in incorrect
placement with zero offset from the let margin (STRWEB-53).

h/t @bogdandenis and @mkuklis for figuring this all out.

Refs STCOR-635
---
 CHANGELOG.md     |  1 +
 src/Pluggable.js | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40a95ecc8..8135621b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 * Update NodeJS to v16 in GitHub Actions. Refs STCOR-623.
 * Provide `useCallout` hook. Refs STCOR-631.
 * Add message to indicate user cannot access app/record. Refs STCOR-619.
+* Wrapp `<Pluggable>` in `<Suspense>` to avoid whole-tree re-render. Refs STCOR-635.
 
 ## [8.1.0](https://github.com/folio-org/stripes-core/tree/v8.1.0) (2022-02-11)
 [Full Changelog](https://github.com/folio-org/stripes-core/compare/v8.0.0...v8.1.0)
diff --git a/src/Pluggable.js b/src/Pluggable.js
index 542110269..5953002e6 100644
--- a/src/Pluggable.js
+++ b/src/Pluggable.js
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { modules } from 'stripes-config';
 import { withStripes } from './StripesContext';
-import { ModuleHierarchyProvider } from './components';
+import { LoadingView, ModuleHierarchyProvider } from './components';
 
 const Pluggable = (props) => {
   const plugins = modules.plugin || [];
@@ -37,7 +37,9 @@ const Pluggable = (props) => {
   if (cachedPlugins.length) {
     return cachedPlugins.map(({ plugin, Child }) => (
       <ModuleHierarchyProvider module={plugin}>
-        <Child {...props} actAs="plugin" />
+        <Suspense fallback={<LoadingView />}>
+          <Child {...props} actAs="plugin" />
+        </Suspense>
       </ModuleHierarchyProvider>
     ));
   }
@@ -47,7 +49,11 @@ const Pluggable = (props) => {
     // eslint-disable-next-line no-console
     console.error(`<Pluggable type="${props.type}"> has ${props.children.length} children, can only return one`);
   }
-  return props.children;
+  return (
+    <Suspense fallback={<LoadingView />}>
+      {props.children}
+    </Suspense>
+  );
 };
 
 Pluggable.propTypes = {

From 03955524f0a1c4ccad11adfc4b06775045a18e94 Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@ebsco.com>
Date: Thu, 9 Jun 2022 15:05:05 -0400
Subject: [PATCH 2/3] super helpful if you import the components you're using

---
 src/Pluggable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Pluggable.js b/src/Pluggable.js
index 5953002e6..4b39072d8 100644
--- a/src/Pluggable.js
+++ b/src/Pluggable.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { Suspense, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { modules } from 'stripes-config';
 import { withStripes } from './StripesContext';

From e8ddb8a764c1fd00bdc4a95134a225cf6de8cbb7 Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@ebsco.com>
Date: Fri, 10 Jun 2022 11:58:54 -0400
Subject: [PATCH 3/3] correctly import LoadingView

---
 src/Pluggable.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Pluggable.js b/src/Pluggable.js
index 4b39072d8..863b97100 100644
--- a/src/Pluggable.js
+++ b/src/Pluggable.js
@@ -2,7 +2,8 @@ import React, { Suspense, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { modules } from 'stripes-config';
 import { withStripes } from './StripesContext';
-import { LoadingView, ModuleHierarchyProvider } from './components';
+import { ModuleHierarchyProvider } from './components';
+import { LoadingView } from '@folio/stripes-components';
 
 const Pluggable = (props) => {
   const plugins = modules.plugin || [];