(fix) O3-1422: Fix workspace loading state (#995)

openmrs · May 15, 2024 · 751d757 · 751d757
1 parent ae063df
commit 751d757
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/packages/framework/esm-framework/jest.config.js b/packages/framework/esm-framework/jest.config.js
@@ -6,6 +6,7 @@ module.exports = {
     '\\.(s?css)$': 'identity-obj-proxy',
     '\\.(svg)$': '<rootDir>/__mocks__/fileMock.js',
     'lodash-es/(.*)': 'lodash/$1',
+    'lodash-es': 'lodash',
     // See https://jestjs.io/docs/upgrading-to-jest28#packagejson-exports
     // which links to https://github.com/microsoft/accessibility-insights-web/pull/5421#issuecomment-1109168149
     '^dexie$': require.resolve('dexie'),

diff --git a/packages/framework/esm-styleguide/src/workspaces/window/workspace-renderer.component.tsx b/packages/framework/esm-styleguide/src/workspaces/window/workspace-renderer.component.tsx
@@ -19,6 +19,7 @@ export function WorkspaceRenderer({ workspace, additionalPropsFromPage }: Worksp
   const { workspaceWindowState } = useWorkspaces();
   const maximized = workspaceWindowState === 'maximized';
   const [lifecycle, setLifecycle] = useState<ParcelConfig | undefined>();
+
   useEffect(() => {
     let active = true;
     workspace.load().then(({ default: result, ...lifecycle }) => {
@@ -48,7 +49,7 @@ export function WorkspaceRenderer({ workspace, additionalPropsFromPage }: Worksp
       {lifecycle ? (
         <Parcel key={workspace.name} config={lifecycle} mountParcel={mountRootParcel} {...props} />
       ) : (
-        <InlineLoading className={styles.loading} description={`${getCoreTranslation('loading', 'Loading')} ...`} />
+        <InlineLoading className={styles.loader} description={`${getCoreTranslation('loading', 'Loading')} ...`} />
       )}
     </div>
   );

diff --git a/packages/framework/esm-styleguide/src/workspaces/window/workspace-window.module.scss b/packages/framework/esm-styleguide/src/workspaces/window/workspace-window.module.scss
@@ -42,6 +42,13 @@ $container-width: calc(100% - 3rem);
   width: $container-width;
 }
 
+.loader {
+  display: flex;
+  background-color: $openmrs-background-grey;
+  justify-content: center;
+  min-height: spacing.$spacing-09;
+}
+
 /* Desktop */
 :global(.omrs-breakpoint-gt-tablet) {
   .maximized {
@@ -118,7 +125,7 @@ $container-width: calc(100% - 3rem);
   .fixed {
     background-color: $ui-01;
     top: 3rem;
-    max-height: var(--tablet-workspace-window-height);
+    min-height: var(--tablet-workspace-window-height);
   }
 
   .dynamicWidth {