feat(minimal mode/overview): show preview first in minimal mode (#9395)

Author: luvkapur

scopes/docs/docs/overview/overview.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import React, { useContext, ComponentType, useState } from 'react';
 import classNames from 'classnames';
 import { flatten } from 'lodash';
@@ -10,6 +11,7 @@ import { ComponentPreview, ComponentPreviewProps } from '@teambit/preview.ui.com
 import { ComponentOverview } from '@teambit/component.ui.component-meta';
 import { CompositionGallery, CompositionGallerySkeleton } from '@teambit/compositions.panels.composition-gallery';
 import { useThemePicker } from '@teambit/base-react.themes.theme-switcher';
+import { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';
 import { ReadmeSkeleton } from './readme-skeleton';
 import styles from './overview.module.scss';
 
@@ -54,7 +56,7 @@ export function Overview({ titleBadges, overviewOptions, previewProps, getEmptyS
   const defaultLoadingState = React.useMemo(() => {
     return isScaling && !includesEnvTemplate;
   }, [isScaling, includesEnvTemplate]);
-
+  const { isMinimal } = useWorkspaceMode();
   const [isLoading, setLoading] = useState(defaultLoadingState);
 
   const iframeQueryParams = `onlyOverview=${component.preview?.onlyOverview || 'false'}&skipIncludes=${
@@ -106,19 +108,39 @@ export function Overview({ titleBadges, overviewOptions, previewProps, getEmptyS
               <CompositionGallerySkeleton compositionsLength={Math.min(component.compositions.length, 3)} />
             </ReadmeSkeleton>
           )}
-          <ComponentPreview
-            onLoad={onPreviewLoad}
-            previewName="overview"
-            pubsub={true}
-            queryParams={[iframeQueryParams, themeParams, overviewPropsValues?.queryParams || '']}
-            viewport={null}
-            fullContentHeight
-            disableScroll={true}
-            {...rest}
-            component={component}
-            style={{ width: '100%', height: '100%', minHeight: !isScaling ? 500 : undefined }}
-          />
-          {component.preview?.onlyOverview && !isLoading && <CompositionGallery component={component} />}
+          {!isMinimal ? (
+            <>
+              <ComponentPreview
+                onLoad={onPreviewLoad}
+                previewName="overview"
+                pubsub={true}
+                queryParams={[iframeQueryParams, themeParams, overviewPropsValues?.queryParams || '']}
+                viewport={null}
+                fullContentHeight
+                disableScroll={true}
+                {...rest}
+                component={component}
+                style={{ width: '100%', height: '100%', minHeight: !isScaling ? 500 : undefined }}
+              />
+              {component.preview?.onlyOverview && !isLoading && <CompositionGallery component={component} />}
+            </>
+          ) : (
+            <>
+              {component.preview?.onlyOverview && !isLoading && <CompositionGallery component={component} />}
+              <ComponentPreview
+                onLoad={onPreviewLoad}
+                previewName="overview"
+                pubsub={true}
+                queryParams={[iframeQueryParams, themeParams, overviewPropsValues?.queryParams || '']}
+                viewport={null}
+                fullContentHeight
+                disableScroll={true}
+                {...rest}
+                component={component}
+                style={{ width: '100%', height: '100%', minHeight: !isScaling ? 500 : undefined }}
+              />
+            </>
+          )}
           {component.preview?.onlyOverview && !isLoading && TaggedAPI && (
             <TaggedAPI componentId={component.id.toString()} />
           )}