Add mssing loading screen to Custom section (#3524)

Author: julieg18

webview/src/plots/components/App.test.tsx

@@ -262,6 +262,7 @@ describe('App', () => {
         ],
         width: DEFAULT_NB_ITEMS_PER_ROW
       },
+      custom: null,
       hasPlots: true,
       hasUnselectedPlots: false,
       sectionCollapsed: DEFAULT_SECTION_COLLAPSED,
@@ -279,7 +280,7 @@ describe('App', () => {
     })
     const loading = await screen.findAllByText('Loading...')
 
-    expect(loading).toHaveLength(2)
+    expect(loading).toHaveLength(3)
   })
 
   it('should render the Add Plots and Add Experiments get started button when there are experiments which have plots that are all unselected', async () => {

webview/src/plots/components/customPlots/CustomPlots.tsx

@@ -15,6 +15,7 @@ import { shouldUseVirtualizedGrid } from '../util'
 import { PlotsState } from '../../store'
 import { sendMessage } from '../../../shared/vscode'
 import { changeOrderWithDraggedInfo } from '../../../util/array'
+import { LoadingSection, sectionIsLoading } from '../LoadingSection'
 
 interface CustomPlotsProps {
   plotsIds: string[]
@@ -29,6 +30,9 @@ export const CustomPlots: React.FC<CustomPlotsProps> = ({ plotsIds }) => {
   const draggedRef = useSelector(
     (state: PlotsState) => state.dragAndDrop.draggedRef
   )
+  const selectedRevisions = useSelector(
+    (state: PlotsState) => state.webview.selectedRevisions
+  )
 
   useEffect(() => {
     setOrder(plotsIds)
@@ -42,6 +46,10 @@ export const CustomPlots: React.FC<CustomPlotsProps> = ({ plotsIds }) => {
     })
   }
 
+  if (sectionIsLoading(selectedRevisions)) {
+    return <LoadingSection />
+  }
+
   if (!hasData) {
     return <EmptyState isFullScreen={false}>No Plots to Display</EmptyState>
   }