chore(ui): Improve performance of UI (#1994)

Signed-off-by: Remington Breeze <[email protected]>

.gitignore

@@ -6,4 +6,5 @@ charts/kargo/*.tgz
 coverage.txt
 pkg/api/v1alpha1/
 vendor/
+internal/api/ui/
 .DS_Store

go.mod

@@ -22,6 +22,7 @@ require (
  github.com/google/uuid v1.6.0
  github.com/hashicorp/go-cleanhttp v0.5.2
  github.com/kelseyhightower/envconfig v1.4.0
+ github.com/klauspost/compress v1.16.5
  github.com/oklog/ulid/v2 v2.1.0
  github.com/opencontainers/go-digest v1.0.0
  github.com/opencontainers/image-spec v1.1.0
@@ -55,8 +56,6 @@ require (
  sigs.k8s.io/yaml v1.4.0
 )
 
-require github.com/go-jose/go-jose/v4 v4.0.1 // indirect
-
 require (
  github.com/AdaLogics/go-fuzz-headers v0.0.0-20230811130428-ced1acdcaa24 // indirect
  github.com/Azure/go-ansiterm v0.0.0-20210617225240-d185dfc1b5a1 // indirect
@@ -105,7 +104,6 @@ require (
  github.com/josharian/intern v1.0.0 // indirect
  github.com/json-iterator/go v1.1.12 // indirect
  github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 // indirect
- github.com/klauspost/compress v1.16.5 // indirect
  github.com/liggitt/tabwriter v0.0.0-20181228230101-89fcab3d43de // indirect
  github.com/mailru/easyjson v0.7.7 // indirect
  github.com/mattn/go-colorable v0.1.13 // indirect
@@ -153,3 +151,5 @@ require (
  sigs.k8s.io/kustomize/kyaml v0.16.0 // indirect
  sigs.k8s.io/structured-merge-diff/v4 v4.4.1 // indirect
 )
+
+require github.com/go-jose/go-jose/v4 v4.0.1 // indirect

internal/api/server.go

@@ -14,6 +14,7 @@ import (
  "time"
 
  "connectrpc.com/grpchealth"
+ "github.com/klauspost/compress/gzhttp"
  "github.com/rs/cors"
  "github.com/sirupsen/logrus"
  "golang.org/x/net/http2"
@@ -274,7 +275,7 @@ func newDashboardRequestHandler() (http.HandlerFunc, error) {
  }
 
  handler := http.FileServer(http.FS(uiFS))
- return func(w http.ResponseWriter, req *http.Request) {
+ withoutGzip := http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
  if req.Method != http.MethodGet {
  http.Error(w, http.StatusText(http.StatusMethodNotAllowed), http.StatusMethodNotAllowed)
  return
@@ -318,5 +319,8 @@ func newDashboardRequestHandler() (http.HandlerFunc, error) {
 
  // Path is a file
  handler.ServeHTTP(w, req)
- }, nil
+ })
+
+ withGz := gzhttp.GzipHandler(withoutGzip)
+ return http.HandlerFunc(withGz.ServeHTTP), nil
 }

internal/cli/cmd/login/assets/splash.css

@@ -1,6 +1,7 @@
 @font-face {
  font-family: Poppins;
- src: url(Poppins-Medium.ttf) format('truetype');;
+ src: url(Poppins-Medium.ttf) format('truetype');
+ font-display: swap;
 }
 html {
  height: 100%;

ui/package.json

@@ -20,6 +20,7 @@
  "@types/node": "^20.11.19",
  "@types/react": "^18.2.56",
  "@types/react-dom": "^18.2.19",
+ "@types/react-infinite-scroller": "^1.2.5",
  "@typescript-eslint/eslint-plugin": "^6.18.1",
  "@typescript-eslint/parser": "^6.18.1",
  "@vitejs/plugin-react": "^4.2.1",
@@ -39,6 +40,7 @@
  "ts-morph": "^21.0.1",
  "typescript": "^5.3.3",
  "vite": "^5.0.13",
+ "vite-plugin-compression": "^0.5.1",
  "vite-tsconfig-paths": "^4.2.3",
  "vitest": "^0.34.6",
  "zx": "^7.2.3"
@@ -68,6 +70,7 @@
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-hook-form": "^7.49.3",
+ "react-infinite-scroller": "^1.2.6",
  "react-router-dom": "^6.21.2",
  "vite-plugin-monaco-editor": "^1.1.0",
  "yaml": "^2.3.4",