perf(Component UI): lazy load component logs

.bitmap

@@ -1329,6 +1329,12 @@
         "mainFile": "index.ts",
         "rootDir": "scopes/code/ui/code-tab-tree"
     },
+    "ui/code-view": {
+        "scope": "teambit.code",
+        "version": "5e2b49420c500d4d88e1b05aa232061abc0fa0a7",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/code-view"
+    },
     "ui/compare/lane-compare": {
         "scope": "teambit.lanes",
         "version": "0.0.82",

components/ui/code-view/code-view.module.scss

@@ -0,0 +1,44 @@
+.codeView {
+  padding: 24px 40px;
+  width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  .codeSnippetWrapper {
+    width: 100%;
+    max-width: 100%;
+    .codeSnippet {
+      display: block;
+      overflow: auto;
+      height: calc(100vh - 200px);
+      > code {
+        > code {
+          // this is to design the line numbers culumn
+          border-right: 1px solid #323232;
+          padding-right: 16px !important;
+          margin-right: 16px;
+        }
+      }
+    }
+    // TODO - fix this in code snippet component. it breaks when the component renders in different places
+    > span {
+      top: 13px !important;
+    }
+  }
+}
+
+.img {
+  width: 20px;
+  margin-right: 10px;
+}
+
+.fileName {
+  display: flex;
+  align-items: baseline;
+}
+
+.emptyCodeView {
+  margin: auto;
+  text-align: center;
+  font-size: 24px;
+}

components/ui/code-view/code-view.tsx

@@ -0,0 +1,76 @@
+import { H1 } from '@teambit/documenter.ui.heading';
+import classNames from 'classnames';
+import React, { HTMLAttributes, useMemo } from 'react';
+import { CodeSnippet } from '@teambit/documenter.ui.code-snippet';
+import { useFileContent } from '@teambit/code.ui.queries.get-file-content';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
+import markDownSyntax from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
+import { staticStorageUrl } from '@teambit/base-ui.constants.storage';
+import { ComponentID } from '@teambit/component';
+import styles from './code-view.module.scss';
+
+export type CodeViewProps = {
+  componentId: ComponentID;
+  currentFile?: string;
+  currentFileContent?: string;
+  icon?: string;
+  loading?: boolean;
+  codeSnippetClassName?: string;
+} & HTMLAttributes<HTMLDivElement>;
+
+SyntaxHighlighter.registerLanguage('md', markDownSyntax);
+
+export function CodeView({
+  className,
+  componentId,
+  currentFile,
+  icon,
+  currentFileContent,
+  codeSnippetClassName,
+  loading: loadingFromProps,
+}: CodeViewProps) {
+  const { fileContent: downloadedFileContent, loading: loadingFileContent } = useFileContent(
+    componentId,
+    currentFile,
+    !!currentFileContent
+  );
+  const loading = loadingFromProps || loadingFileContent;
+  const fileContent = currentFileContent || downloadedFileContent;
+  const title = useMemo(() => currentFile?.split('/').pop(), [currentFile]);
+  const lang = useMemo(() => {
+    const langFromFileEnding = currentFile?.split('.').pop();
+
+    // for some reason, SyntaxHighlighter doesnt support scss or sass highlighting, only css. I need to check how to fix this properly
+    if (langFromFileEnding === 'scss' || langFromFileEnding === 'sass') return 'css';
+    if (langFromFileEnding === 'mdx') return 'md';
+    return langFromFileEnding;
+  }, [fileContent]);
+
+  if (!fileContent && !loading && currentFile) return <EmptyCodeView />;
+
+  return (
+    <div className={classNames(styles.codeView, className)}>
+      <H1 size="sm" className={styles.fileName}>
+        {currentFile && <img className={styles.img} src={icon} />}
+        <span>{title}</span>
+      </H1>
+      <CodeSnippet
+        className={styles.codeSnippetWrapper}
+        frameClass={classNames(styles.codeSnippet, codeSnippetClassName)}
+        showLineNumbers
+        language={lang}
+      >
+        {fileContent || ''}
+      </CodeSnippet>
+    </div>
+  );
+}
+
+function EmptyCodeView() {
+  return (
+    <div className={styles.emptyCodeView}>
+      <img src={`${staticStorageUrl}/harmony/empty-code-view.svg`} />
+      <div>Nothing to show</div>
+    </div>
+  );
+}

components/ui/code-view/index.ts

@@ -0,0 +1,2 @@
+export { CodeView } from './code-view';
+export type { CodeViewProps } from './code-view';

components/ui/component-compare/component-compare/component-compare.tsx

@@ -79,14 +79,27 @@ export function ComponentCompare(props: ComponentCompareProps) {
     component: base,
     loading: loadingBase,
     componentDescriptor: baseComponentDescriptor,
-  } = useComponent(host, baseId.toString(), { customUseComponent });
+  } = useComponent(host, baseId.toString(), {
+    customUseComponent,
+    logFilters: {
+      log: {
+        logLimit: 3,
+      },
+    },
+  });
+
   const {
     component: compareComponent,
     loading: loadingCompare,
     componentDescriptor: compareComponentDescriptor,
   } = useComponent(host, _compareId?.toString() || '', {
     skip: !_compareId,
     customUseComponent,
+    logFilters: {
+      log: {
+        logLimit: 3,
+      },
+    },
   });
 
   const loading = loadingBase || loadingCompare;
@@ -170,7 +183,11 @@ function RenderCompareScreen(props: ComponentCompareProps) {
   return (
     <>
       {showVersionPicker && (
-        <div className={styles.top}>{state?.versionPicker?.element || <ComponentCompareVersionPicker />}</div>
+        <div className={styles.top}>
+          {state?.versionPicker?.element || (
+            <ComponentCompareVersionPicker host={props.host} customUseComponent={props.customUseComponent} />
+          )}
+        </div>
       )}
       <div className={styles.bottom}>
         <CompareMenuNav {...props} />

components/ui/component-compare/version-picker/component-compare-version-picker.tsx

@@ -1,36 +1,57 @@
-import React, { HTMLAttributes, useMemo } from 'react';
-import { DropdownComponentVersion, VersionDropdown } from '@teambit/component.ui.version-dropdown';
+import React, { HTMLAttributes } from 'react';
+import { VersionDropdown } from '@teambit/component.ui.version-dropdown';
 import { useUpdatedUrlFromQuery } from '@teambit/component.ui.component-compare.hooks.use-component-compare-url';
 import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
+import { UseComponentType, useComponent } from '@teambit/component';
 import classNames from 'classnames';
 
 import styles from './component-compare-version-picker.module.scss';
 
-export type ComponentCompareVersionPickerProps = {} & HTMLAttributes<HTMLDivElement>;
+export type ComponentCompareVersionPickerProps = {
+  customUseComponent?: UseComponentType;
+  host: string;
+} & HTMLAttributes<HTMLDivElement>;
 
-export function ComponentCompareVersionPicker({ className }: ComponentCompareVersionPickerProps) {
+export function ComponentCompareVersionPicker({
+  className,
+  host,
+  customUseComponent,
+}: ComponentCompareVersionPickerProps) {
   const componentCompare = useComponentCompare();
   const compare = componentCompare?.compare?.model;
-
-  const logs =
-    (compare?.logs || []).filter((log) => {
-      const version = log.tag || log.hash;
-      return componentCompare?.compare?.hasLocalChanges || version !== compare?.id.version;
-    }) || [];
-
-  const [tags, snaps] = useMemo(() => {
-    return (logs || []).reduce(
-      ([_tags, _snaps], log) => {
-        if (!log.tag) {
-          _snaps.push({ ...log, version: log.hash });
-        } else {
-          _tags.push({ ...log, version: log.tag as string });
-        }
-        return [_tags, _snaps];
+  const componentId = compare?.id.toString();
+  const componentWithLogsOptions = {
+    logFilters: {
+      snapLog: {
+        logLimit: 10,
       },
-      [new Array<DropdownComponentVersion>(), new Array<DropdownComponentVersion>()]
-    );
-  }, [logs]);
+      tagLog: {
+        logLimit: 10,
+      },
+      fetchLogsByTypeSeparately: true,
+    },
+    customUseComponent,
+  };
+
+  const useVersions = () => {
+    const { componentLogs = {}, loading: loadingLogs } = useComponent(host, componentId, componentWithLogsOptions);
+    return {
+      loading: loadingLogs,
+      ...componentLogs,
+      snaps: (componentLogs.snaps || [])
+        .map((snap) => ({ ...snap, version: snap.hash }))
+        .filter((log) => {
+          const version = log.tag || log.hash;
+          return componentCompare?.compare?.hasLocalChanges || version !== compare?.id.version;
+        }),
+      tags: (componentLogs.tags || [])
+        .map((tag) => ({ ...tag, version: tag.tag as string }))
+        .filter((log) => {
+          const version = log.tag || log.hash;
+          return componentCompare?.compare?.hasLocalChanges || version !== compare?.id.version;
+        }),
+    };
+  };
 
   const compareVersion = componentCompare?.compare?.hasLocalChanges ? 'workspace' : compare?.version;
 
@@ -47,24 +68,22 @@ export function ComponentCompareVersionPicker({ className }: ComponentCompareVer
         dropdownClassName={styles.componentCompareDropdown}
         placeholderClassName={styles.componentCompareVersionPlaceholder}
         menuClassName={classNames(styles.componentCompareVersionMenu, styles.showMenuOverNav)}
-        snaps={snaps}
-        tags={tags}
         currentVersion={baseVersion as string}
         loading={componentCompare?.loading}
         overrideVersionHref={(_baseVersion) => {
           return useUpdatedUrlFromQuery({ baseVersion: _baseVersion });
         }}
-        disabled={snaps.concat(tags).length < 2}
+        disabled={(compare?.logs?.length ?? 0) < 2}
+        hasMoreVersions={(compare?.logs?.length ?? 0) > 1}
         showVersionDetails={true}
+        useComponentVersions={useVersions}
       />
       <div className={styles.titleText}>with</div>
       <VersionDropdown
         className={classNames(styles.componentCompareVersionContainer, styles.right)}
         dropdownClassName={styles.componentCompareDropdown}
         placeholderClassName={styles.componentCompareVersionPlaceholder}
         menuClassName={styles.componentCompareVersionMenu}
-        snaps={snaps}
-        tags={tags}
         disabled={true}
         loading={componentCompare?.loading}
         currentVersion={compareVersion as string}

components/ui/inputs/lane-selector/lane-placeholder.tsx

@@ -11,19 +11,25 @@ export type LanePlaceholderProps = {
   selectedLaneId?: LaneId;
   disabled?: boolean;
   showScope?: boolean;
+  loading?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
 export function LanePlaceholder({
   selectedLaneId,
   disabled,
   className,
   showScope = true,
+  loading,
   ...rest
 }: LanePlaceholderProps) {
   const laneIdStr = selectedLaneId?.isDefault()
     ? selectedLaneId.name
     : (showScope && selectedLaneId?.toString()) || selectedLaneId?.name;
 
+  if (loading) {
+    return null;
+  }
+
   return (
     <div {...rest} className={classnames(styles.placeholder, className, disabled && styles.disabled)}>
       <LaneIcon className={styles.icon} />

components/ui/inputs/lane-selector/lane-selector-list.tsx

@@ -39,6 +39,7 @@ export function LaneSelectorList({
   listNavigator,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   forceCloseOnEnter,
+  loading,
   ...rest
 }: LaneSelectorListProps) {
   const navigate = useNavigate();
@@ -156,6 +157,8 @@ export function LaneSelectorList({
     }
   }, [selectedLaneId?.toString()]);
 
+  if (loading) return null;
+
   return (
     <div {...rest} className={classnames(className, styles.laneSelectorList)}>
       {groupByScope &&

components/ui/inputs/lane-selector/lane-selector.tsx

@@ -29,6 +29,7 @@ export type LaneSelectorProps = {
   sortOptions?: LaneSelectorSortBy[];
   scopeIconLookup?: Map<string, React.ReactNode>;
   forceCloseOnEnter?: boolean;
+  loading?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
 export type GroupedLaneDropdownItem = [scope: string, lanes: LaneModel[]];
@@ -61,6 +62,7 @@ export function LaneSelector(props: LaneSelectorProps) {
     scopeIcon,
     scopeIconLookup,
     forceCloseOnEnter,
+    loading,
     ...rest
   } = props;
 
@@ -235,7 +237,12 @@ export function LaneSelector(props: LaneSelectorProps) {
           });
         }}
         placeholderContent={
-          <LanePlaceholder disabled={!multipleLanes} selectedLaneId={selectedLaneId} showScope={groupByScope} />
+          <LanePlaceholder
+            loading={loading}
+            disabled={!multipleLanes}
+            selectedLaneId={selectedLaneId}
+            showScope={groupByScope}
+          />
         }
         className={classnames(styles.dropdown, !multipleLanes && styles.disabled)}
       >

components/ui/navigation/lane-switcher/lane-switcher.module.scss

@@ -35,3 +35,12 @@
   flex: 0;
   width: 36px;
 }
+
+.loader {
+  color: var(--bit-bg-dent, #f6f6f6);
+  padding: 4px 0px;
+
+  > span {
+    padding: 8px;
+  }
+}