@parca/profile 0.16.103 → 0.16.105

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.105](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.104...@parca/profile@0.16.105) (2023-02-02)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.104](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.103...@parca/profile@0.16.104) (2023-01-27)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.103](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.102...@parca/profile@0.16.103) (2023-01-27)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Callgraph as CallgraphType } from '@parca/client';
 export interface Props {
     graph: CallgraphType;

package/dist/GraphTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CallgraphNode, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
 import { Function as ParcaFunction, Location, Mapping } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface GraphTooltipProps {

package/dist/IcicleGraph.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Flamegraph, FlamegraphNode, FlamegraphRootNode } from '@parca/client';
 import { Mapping, Function as ParcaFunction, Location } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface IcicleGraphProps {

package/dist/IcicleGraph.js

@@ -28,12 +28,11 @@ import { throttle } from 'lodash';
 import { pointer } from 'd3-selection';
 import { scaleLinear } from 'd3-scale';
 import GraphTooltip from './GraphTooltip';
-import { diffColor, getLastItem, isSearchMatch, selectQueryParam } from '@parca/functions';
+import { diffColor, getLastItem, isSearchMatch, selectQueryParam, useURLState, } from '@parca/functions';
 import { selectDarkMode, useAppSelector } from '@parca/store';
 import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
 import { Button } from '@parca/components';
 import { hexifyAddress } from './utils';
-import { useURLState } from '@parca/functions';
 var RowHeight = 26;
 var icicleRectStyles = {
     cursor: 'pointer',

package/dist/MatchersInput/SuggestionItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     isHighlighted: boolean;
     onHighlight: () => void;

package/dist/MatchersInput/SuggestionsList.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare class Suggestion {
     type: string;
     typeahead: string;

package/dist/MatchersInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Query } from '@parca/parser';
 import { LabelsResponse, QueryServiceClient } from '@parca/client';
 interface MatchersInputProps {

package/dist/MetricsCircle/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface MetricsCircleProps {
     cx: number;
     cy: number;

package/dist/MetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SingleProfileSelection } from '..';
 import { MetricsSeries as MetricsSeriesPb, Label } from '@parca/client';
 import { DateTimeRange } from '@parca/components';

package/dist/MetricsSeries/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as d3 from 'd3';
 interface MetricsSeriesProps {
     data: any;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NavigateFunction } from '@parca/functions';
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSelection } from '..';

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NavigateFunction } from '@parca/functions';
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSelection } from '..';

package/dist/ProfileExplorer/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { NavigateFunction } from '@parca/functions';
 interface ProfileExplorerProps {

package/dist/ProfileIcicleGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Flamegraph } from '@parca/client';
 export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
@@ -7,6 +8,7 @@ interface ProfileIcicleGraphProps {
     curPath: string[] | [];
     setNewCurPath: (path: string[]) => void;
     onContainerResize?: ResizeHandler;
+    loading: boolean;
 }
-declare const ProfileIcicleGraph: ({ graph, curPath, setNewCurPath, sampleUnit, onContainerResize, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, curPath, setNewCurPath, sampleUnit, onContainerResize, loading, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;

package/dist/ProfileIcicleGraph/index.js

@@ -17,7 +17,7 @@ import { selectQueryParam } from '@parca/functions';
 import { useEffect, useMemo } from 'react';
 var numberFormatter = new Intl.NumberFormat('en-US');
 var ProfileIcicleGraph = function (_a) {
-    var graph = _a.graph, curPath = _a.curPath, setNewCurPath = _a.setNewCurPath, sampleUnit = _a.sampleUnit, onContainerResize = _a.onContainerResize;
+    var graph = _a.graph, curPath = _a.curPath, setNewCurPath = _a.setNewCurPath, sampleUnit = _a.sampleUnit, onContainerResize = _a.onContainerResize, loading = _a.loading;
     var compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
     var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
     useEffect(function () {
@@ -45,7 +45,7 @@ var ProfileIcicleGraph = function (_a) {
     if (graph === undefined)
         return _jsx("div", { children: "no data..." });
     var total = graph.total;
-    if (parseFloat(total) === 0)
+    if (parseFloat(total) === 0 && !loading)
         return _jsx(_Fragment, { children: "Profile has no samples" });
     return (_jsxs(_Fragment, { children: [compareMode && _jsx(DiffLegend, {}), trimDifference > BigInt(0) ? (_jsxs("p", __assign({ className: "my-2 text-sm" }, { children: ["Showing ", formattedTotal, "(", trimmedPercentage, "%) out of ", formattedUntrimmedTotal, " samples"] }))) : null, _jsx("div", __assign({ ref: ref }, { children: _jsx(IcicleGraph, { width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, graph: graph, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit }) }))] }));
 };

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileSelection } from '..';
 import { QueryServiceClient, QueryRangeResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';

package/dist/ProfileSelector/CompareButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const CompareButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/MergeButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const MergeButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileSelection } from '..';

package/dist/ProfileSource.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileType } from '@parca/parser';
 import { Label, QueryRequest, ProfileDiffSelection } from '@parca/client';
 export interface ProfileSource {

package/dist/ProfileTypeSelector/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProfileType, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 interface WellKnownProfile {

package/dist/ProfileView/FilterByFunctionButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NavigateFunction } from '@parca/functions';
 declare const FilterByFunctionButton: ({ navigateTo, }: {
     navigateTo: NavigateFunction | undefined;

package/dist/ProfileView/ViewSelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NavigateFunction } from '@parca/functions';
 interface Props {
     position: number;

package/dist/ProfileView/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient, Flamegraph, Top, Callgraph as CallgraphType } from '@parca/client';
 import { ResizeHandler } from '../ProfileIcicleGraph';
 import { ProfileSource } from '../ProfileSource';

package/dist/ProfileView/index.js

@@ -101,13 +101,13 @@ export var ProfileView = function (_a) {
         var type = _a.type, isHalfScreen = _a.isHalfScreen;
         switch (type) {
             case 'icicle': {
-                return (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null ? (_jsx(Profiler, __assign({ id: "icicleGraph", onRender: perf === null || perf === void 0 ? void 0 : perf.onRender }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit, onContainerResize: onFlamegraphContainerResize }) }))) : (_jsx(_Fragment, {}));
+                return (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null ? (_jsx(Profiler, __assign({ id: "icicleGraph", onRender: perf === null || perf === void 0 ? void 0 : perf.onRender }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit, onContainerResize: onFlamegraphContainerResize, loading: flamegraphData.loading }) }))) : (_jsx(_Fragment, {}));
             }
             case 'callgraph': {
                 return (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) != null && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined ? (_jsx(Callgraph, { graph: callgraphData.data, sampleUnit: sampleUnit, width: isHalfScreen ? (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) / 2 : dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, colorRange: colorRange })) : (_jsx(_Fragment, {}));
             }
             case 'table': {
-                return topTableData != null ? (_jsx(TopTable, { data: topTableData.data, sampleUnit: sampleUnit, navigateTo: navigateTo })) : (_jsx(_Fragment, {}));
+                return topTableData != null ? (_jsx(TopTable, { loading: topTableData.loading, data: topTableData.data, sampleUnit: sampleUnit, navigateTo: navigateTo })) : (_jsx(_Fragment, {}));
             }
             default: {
                 return _jsx(_Fragment, {});
@@ -128,10 +128,10 @@ export var ProfileView = function (_a) {
             setDashboardItems(newDashboardItems);
         }
     };
-    return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex py-3 w-full" }, { children: [_jsxs("div", __assign({ className: "w-2/5 flex space-x-4" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource != null && queryClient != null ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient, disabled: isLoading })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
+    return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex py-3 w-full" }, { children: [_jsxs("div", __assign({ className: "w-2/5 flex space-x-4" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource != null && queryClient != null ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
                                                         e.preventDefault();
                                                         onDownloadPProf();
-                                                    }, disabled: isLoading }, { children: "Download pprof" }))] })), _jsx(FilterByFunctionButton, { navigateTo: navigateTo })] })), _jsx("div", __assign({ className: "flex ml-auto gap-2" }, { children: _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel...", primary: true, addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 }) }))] })), isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsx(DragDropContext, __assign({ onDragEnd: onDragEnd }, { children: _jsx("div", __assign({ className: "w-full", ref: ref }, { children: _jsx(Droppable, __assign({ droppableId: "droppable", direction: "horizontal" }, { children: function (provided) { return (_jsx("div", __assign({ ref: provided.innerRef, className: "flex space-x-4 justify-between w-full" }, provided.droppableProps, { children: dashboardItems.map(function (dashboardItem, index) {
+                                                    } }, { children: "Download pprof" }))] })), _jsx(FilterByFunctionButton, { navigateTo: navigateTo })] })), _jsx("div", __assign({ className: "flex ml-auto gap-2" }, { children: _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel...", primary: true, addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 }) }))] })), isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsx(DragDropContext, __assign({ onDragEnd: onDragEnd }, { children: _jsx("div", __assign({ className: "w-full", ref: ref }, { children: _jsx(Droppable, __assign({ droppableId: "droppable", direction: "horizontal" }, { children: function (provided) { return (_jsx("div", __assign({ ref: provided.innerRef, className: "flex space-x-4 justify-between w-full" }, provided.droppableProps, { children: dashboardItems.map(function (dashboardItem, index) {
                                             return (_jsx(Draggable, __assign({ draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView }, { children: function (provided, snapshot) { return (_createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, { key: dashboardItem, className: cx('border dark:bg-gray-700 rounded border-gray-300 dark:border-gray-500 p-3', isMultiPanelView ? 'w-1/2' : 'w-full', snapshot.isDragging ? 'bg-gray-200' : 'bg-white') }),
                                                     _jsxs("div", __assign({ className: "w-full flex justify-end pb-2" }, { children: [_jsxs("div", __assign({ className: "w-full flex justify-between" }, { children: [_jsx("div", __assign({ className: cx(isMultiPanelView ? 'visible' : 'invisible', 'flex items-center') }, provided.dragHandleProps, { children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) })), _jsx(ViewSelector, { defaultValue: dashboardItem, navigateTo: navigateTo, position: index })] })), isMultiPanelView && (_jsx("button", __assign({ type: "button", onClick: function () { return handleClosePanel(dashboardItem); }, className: "pl-2" }, { children: _jsx(CloseIcon, {}) })))] })),
                                                     getDashboardItemByType({

package/dist/ProfileViewWithData.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSource } from './ProfileSource';
 import { NavigateFunction } from '@parca/functions';

package/dist/TopTable/index.d.ts

@@ -1,11 +1,13 @@
+/// <reference types="react" />
 import { NavigateFunction } from '@parca/functions';
 import { TopNodeMeta, Top } from '@parca/client';
 import '../TopTable.styles.css';
 interface TopTableProps {
+    loading: boolean;
     data?: Top;
     sampleUnit: string;
     navigateTo?: NavigateFunction;
 }
 export declare const RowLabel: (meta: TopNodeMeta | undefined) => string;
-export declare const TopTable: ({ data: top, sampleUnit: unit, navigateTo }: TopTableProps) => JSX.Element;
+export declare const TopTable: ({ data: top, sampleUnit: unit, navigateTo, loading, }: TopTableProps) => JSX.Element;
 export default TopTable;

package/dist/TopTable/index.js

@@ -50,7 +50,7 @@ var addPlusSign = function (num) {
 };
 export var TopTable = function (_a) {
     var _b;
-    var top = _a.data, unit = _a.sampleUnit, navigateTo = _a.navigateTo;
+    var top = _a.data, unit = _a.sampleUnit, navigateTo = _a.navigateTo, loading = _a.loading;
     var router = parseParams(window.location.search);
     var currentSearchString = selectQueryParam('search_string');
     var compareMode = Boolean(selectQueryParam('compare_a')) && Boolean(selectQueryParam('compare_b'));
@@ -128,7 +128,7 @@ export var TopTable = function (_a) {
         return [{ id: compareMode ? 'diff' : 'cumulative', desc: true }];
     }, [compareMode]);
     var total = top != null ? top.list.length : 0;
-    if (total === 0)
+    if (total === 0 && !loading)
         return _jsx(_Fragment, { children: "Profile has no samples" });
     return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "w-full font-robotoMono h-[80vh] overflow-scroll" }, { children: _jsx(Table, { data: (_b = top === null || top === void 0 ? void 0 : top.list) !== null && _b !== void 0 ? _b : [], columns: columns, initialSorting: initialSorting, onRowClick: onRowClick, enableHighlighting: enableHighlighting, shouldHighlightRow: shouldHighlightRow }) })) }));
 };

package/dist/components/DiffLegend.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const DiffLegend: () => JSX.Element;
 export default DiffLegend;

package/dist/components/ProfileShareButton/ResultBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     value: string;
     className?: string;

package/dist/components/ProfileShareButton/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryRequest, QueryServiceClient } from '@parca/client';
 interface Props {
     queryRequest: QueryRequest;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.103",
+  "version": "0.16.105",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.62",
@@ -14,7 +14,7 @@
     "d3-scale": "^4.0.2",
     "d3-selection": "3.0.0",
     "graphviz-wasm": "3.0.0",
-    "konva": "8.4.1",
+    "konva": "8.4.2",
     "react-beautiful-dnd": "^13.1.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-cytoscapejs": "1.2.1",
@@ -27,7 +27,7 @@
     "@types/react-copy-to-clipboard": "5.0.4"
   },
   "resolutions": {
-    "konva": "8.4.1"
+    "konva": "8.4.2"
   },
   "main": "dist/index.js",
   "scripts": {
@@ -44,5 +44,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "483e2f35e6cc346a0eef07586194e79cd0885e59"
+  "gitHead": "453c1e45d742e4f815eb34e4fa542ae691d23ba5"
 }

package/src/IcicleGraph.tsx

@@ -26,12 +26,17 @@ import {
 } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 import type {HoveringNode} from './GraphTooltip';
 import GraphTooltip from './GraphTooltip';
-import {diffColor, getLastItem, isSearchMatch, selectQueryParam} from '@parca/functions';
+import {
+  diffColor,
+  getLastItem,
+  isSearchMatch,
+  selectQueryParam,
+  useURLState,
+} from '@parca/functions';
 import {selectDarkMode, useAppSelector} from '@parca/store';
 import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
 import {Button} from '@parca/components';
 import {hexifyAddress} from './utils';
-import {useURLState} from '@parca/functions';
 
 interface IcicleGraphProps {
   graph: Flamegraph;

package/src/ProfileIcicleGraph/index.tsx

@@ -30,6 +30,7 @@ interface ProfileIcicleGraphProps {
   curPath: string[] | [];
   setNewCurPath: (path: string[]) => void;
   onContainerResize?: ResizeHandler;
+  loading: boolean;
 }
 
 const ProfileIcicleGraph = ({
@@ -38,6 +39,7 @@ const ProfileIcicleGraph = ({
   setNewCurPath,
   sampleUnit,
   onContainerResize,
+  loading,
 }: ProfileIcicleGraphProps): JSX.Element => {
   const compareMode: boolean =
     selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
@@ -71,8 +73,10 @@ const ProfileIcicleGraph = ({
     }, [graph]);
 
   if (graph === undefined) return <div>no data...</div>;
+
   const total = graph.total;
-  if (parseFloat(total) === 0) return <>Profile has no samples</>;
+
+  if (parseFloat(total) === 0 && !loading) return <>Profile has no samples</>;
 
   return (
     <>

package/src/ProfileView/index.tsx

@@ -157,6 +157,7 @@ export const ProfileView = ({
               graph={flamegraphData.data}
               sampleUnit={sampleUnit}
               onContainerResize={onFlamegraphContainerResize}
+              loading={flamegraphData.loading}
             />
           </Profiler>
         ) : (
@@ -177,7 +178,12 @@ export const ProfileView = ({
       }
       case 'table': {
         return topTableData != null ? (
-          <TopTable data={topTableData.data} sampleUnit={sampleUnit} navigateTo={navigateTo} />
+          <TopTable
+            loading={topTableData.loading}
+            data={topTableData.data}
+            sampleUnit={sampleUnit}
+            navigateTo={navigateTo}
+          />
         ) : (
           <></>
         );
@@ -220,7 +226,6 @@ export const ProfileView = ({
                     <ProfileShareButton
                       queryRequest={profileSource.QueryRequest()}
                       queryClient={queryClient}
-                      disabled={isLoading}
                     />
                   ) : null}
 
@@ -230,7 +235,6 @@ export const ProfileView = ({
                       e.preventDefault();
                       onDownloadPProf();
                     }}
-                    disabled={isLoading}
                   >
                     Download pprof
                   </Button>

package/src/TopTable/index.tsx

@@ -31,6 +31,7 @@ import {hexifyAddress} from '../utils';
 import '../TopTable.styles.css';
 
 interface TopTableProps {
+  loading: boolean;
   data?: Top;
   sampleUnit: string;
   navigateTo?: NavigateFunction;
@@ -62,7 +63,12 @@ const addPlusSign = (num: string): string => {
   return `+${num}`;
 };
 
-export const TopTable = ({data: top, sampleUnit: unit, navigateTo}: TopTableProps): JSX.Element => {
+export const TopTable = ({
+  data: top,
+  sampleUnit: unit,
+  navigateTo,
+  loading,
+}: TopTableProps): JSX.Element => {
   const router = parseParams(window.location.search);
   const currentSearchString = selectQueryParam('search_string') as string;
   const compareMode =
@@ -166,7 +172,7 @@ export const TopTable = ({data: top, sampleUnit: unit, navigateTo}: TopTableProp
 
   const total = top != null ? top.list.length : 0;
 
-  if (total === 0) return <>Profile has no samples</>;
+  if (total === 0 && !loading) return <>Profile has no samples</>;
 
   return (
     <>