feat: Add customization support for more UI components (#4634)

Co-authored-by: ashikcn <ashik@L1140.trenser.com>
Co-authored-by: Devu Jayalekshmi <devu.jayalekshmi@trenser.com>
Co-authored-by: Arul Mozhi <arul.mozhi@trenser.com>

platform/app/src/App.tsx

@@ -12,6 +12,7 @@ import {
   CommandsManager,
   HotkeysManager,
   ServiceProvidersManager,
+  SystemContextProvider,
 } from '@ohif/core';
 import {
   DialogProvider,
@@ -114,6 +115,7 @@ function App({
     [I18nextProvider, { i18n }],
     [ThemeWrapperNext],
     [ThemeWrapper],
+    [SystemContextProvider, { commandsManager, extensionManager, hotkeysManager, servicesManager }],
     [ToolboxProvider],
     [ViewportGridProvider, { service: viewportGridService }],
     [ViewportDialogProvider, { service: uiViewportDialogService }],

platform/app/src/routes/Local/Local.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import { useNavigate } from 'react-router-dom';
-import { DicomMetadataStore, MODULE_TYPES } from '@ohif/core';
+import { DicomMetadataStore, MODULE_TYPES, useSystem } from '@ohif/core';
 
 import Dropzone from 'react-dropzone';
 import filesToStudies from './filesToStudies';
 
 import { extensionManager } from '../../App';
 
-import { Button, LoadingIndicatorProgress } from '@ohif/ui';
+import { Button } from '@ohif/ui';
 import { Icons } from '@ohif/ui-next';
 
 const getLoadButton = (onDrop, text, isDir) => {
@@ -49,10 +49,16 @@ type LocalProps = {
 };
 
 function Local({ modePath }: LocalProps) {
+  const { servicesManager } = useSystem();
+  const { customizationService } = servicesManager.services;
   const navigate = useNavigate();
   const dropzoneRef = useRef();
   const [dropInitiated, setDropInitiated] = React.useState(false);
 
+  const LoadingIndicatorProgress = customizationService.getCustomization(
+    'ui.loadingIndicatorProgress'
+  );
+
   // Initializing the dicom local dataSource
   const dataSourceModules = extensionManager.modules[MODULE_TYPES.DATA_SOURCE];
   const localDataSources = dataSourceModules.reduce((acc, curr) => {

platform/app/src/routes/WorkList/WorkList.tsx

@@ -22,7 +22,6 @@ import {
   useModal,
   AboutModal,
   UserPreferences,
-  LoadingIndicatorProgress,
   useSessionStorage,
   InvestigationalUseDialog,
   Button,
@@ -525,6 +524,9 @@ function WorkList({
   }
 
   const { customizationService } = servicesManager.services;
+  const LoadingIndicatorProgress = customizationService.getCustomization(
+    'ui.loadingIndicatorProgress'
+  );
   const DicomUploadComponent = customizationService.getCustomization('dicomUploadComponent');
 
   const uploadProps =