fix(garden): 🐛 added condition for rendering of viewsettings

Dont render viewsettings before virtual garden is init. this prevents the sidebar from moving around
equinor · Feb 2, 2024 · a088b2d · a088b2d
1 parent ada8f7e
commit a088b2d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/packages/garden/src/lib/components/Garden.tsx b/packages/garden/src/lib/components/Garden.tsx
@@ -76,7 +76,7 @@ export function Garden<TData extends Record<PropertyKey, unknown>, TContext = un
 }: GardenProps<TData, TContext>): JSX.Element | null {
   const client = useRef(new QueryClient());
   const [groupingKeys, setGroupingKeys] = useState<string[]>(initialGrouping);
-
+  const [isLoading, setIsLoading] = useState(true);
   const [timeInterval, updateTimeInterval] = useState<string | null>(initialTimeInterval ?? null);
   const onChangetimeInterval = (timeInterval: string | null) => {
     updateTimeInterval(timeInterval);
@@ -116,12 +116,8 @@ export function Garden<TData extends Record<PropertyKey, unknown>, TContext = un
               customViews={customViews}
               visuals={visuals}
             >
-              <VirtualContainer context={context as TContext} dataSource={dataSource} />
-            </GardenConfigProvider>
-
-            {
-              // Hides ViewSettings sidebar when sidesheet is open
-              selected ? null : (
+              <VirtualContainer context={context as TContext} dataSource={dataSource} setIsLoading={setIsLoading} />
+              {selected || isLoading ? null : (
                 <ViewSettings
                   dateVariant={dateVariant}
                   groupingKeys={groupingKeys}
@@ -130,8 +126,8 @@ export function Garden<TData extends Record<PropertyKey, unknown>, TContext = un
                   onChangeTimeInterval={onChangetimeInterval}
                   setGroupingKeys={setGroupingKeys}
                 />
-              )
-            }
+              )}
+            </GardenConfigProvider>
           </GardenContextProvider>
         </Suspense>
       </ErrorBoundary>

diff --git a/packages/garden/src/lib/components/VirtualContainer/VirtualContainer.tsx b/packages/garden/src/lib/components/VirtualContainer/VirtualContainer.tsx
@@ -1,24 +1,27 @@
+import { Icon } from '@equinor/eds-core-react';
+import { info_circle } from '@equinor/eds-icons';
+import { useEffect } from 'react';
+import styled from 'styled-components';
 import { useItemWidths } from '../../hooks';
 import { useGarden } from '../../hooks/useGarden';
 import { useGardenConfig } from '../../hooks/useGardenConfig';
 import { ExpandProvider } from '../ExpandProvider';
 import { GardenDataSource } from '../Garden';
 import { VirtualGarden } from '../VirtualGarden';
-import { StyledVirtualContainer } from './virtualContainer.styles';
-import { info_circle } from '@equinor/eds-icons';
-import { Icon } from '@equinor/eds-core-react';
-import styled from 'styled-components';
 import { SplashScreen } from '../splashScreen/SplashScreen';
+import { StyledVirtualContainer } from './virtualContainer.styles';
 Icon.add({ info_circle });
 
 type VirtualContainerProps<TContext = undefined> = {
   dataSource: GardenDataSource<TContext>;
   context: TContext;
+  setIsLoading: (isLoading: boolean) => void;
 };
 
 export const VirtualContainer = <TContext,>({
   dataSource,
   context,
+  setIsLoading,
 }: VirtualContainerProps<TContext>): JSX.Element | null => {
   const { onClickItem } = useGardenConfig();
   const { gardenMetaQuery } = useGarden();
@@ -27,6 +30,10 @@ export const VirtualContainer = <TContext,>({
     return <SplashScreen />;
   }
 
+  useEffect(() => {
+    if (!gardenMetaQuery.isLoading) setIsLoading(false);
+  }, [gardenMetaQuery.isLoading]);
+
   if (!gardenMetaQuery.data) {
     // Will never happen when suspense is true
     throw new Error();