feat(UI): load apps on scroll

services/cd-service/pkg/service/overview.go

@@ -33,6 +33,7 @@ import (
 	"google.golang.org/grpc/codes"
 	"google.golang.org/grpc/status"
 	"google.golang.org/protobuf/types/known/timestamppb"
+	"gopkg.in/DataDog/dd-trace-go.v1/ddtrace/tracer"
 	"os"
 	"sort"
 	"sync"
@@ -57,6 +58,9 @@ func (o *OverviewServiceServer) GetAppDetails(
 	ctx context.Context,
 	in *api.GetAppDetailsRequest) (*api.GetAppDetailsResponse, error) {
 
+	span, ctx := tracer.StartSpanFromContext(ctx, "GetAppDetails")
+	defer span.Finish()
+
 	var appName = in.AppName
 	var response = &api.GetAppDetailsResponse{
 		Application: &api.Application{

services/frontend-service/src/ui/App/index.tsx

@@ -19,6 +19,8 @@ import { PageRoutes } from './PageRoutes';
 import '../../assets/app-v2.scss';
 import * as React from 'react';
 import {
+    AppDetailsResponse,
+    AppDetailsState,
     EnableRolloutStatus,
     FlushRolloutStatus,
     PanicOverview,
@@ -100,7 +102,16 @@ export const App: React.FC = () => {
                         UpdateOverview.set(result);
                         UpdateOverview.set({ loaded: true });
                         PanicOverview.set({ error: '' });
-                        updateAppDetails.set({});
+
+                        const newDetails: { [p: string]: AppDetailsResponse } = {};
+                        result.lightweightApps?.forEach(
+                            (elem) =>
+                                (newDetails[elem.name] = {
+                                    appDetailState: AppDetailsState.NOTREQUESTED,
+                                    details: undefined,
+                                })
+                        );
+                        updateAppDetails.set(newDetails);
                     },
                     (error) => {
                         PanicOverview.set({ error: JSON.stringify({ msg: 'error in streamoverview', error }) });