fix: flickering theme (#3624)

Author: Mnickii

src/app/views/App.tsx

@@ -13,7 +13,6 @@ import { connect } from 'react-redux';
 import { removeSpinners } from '../..';
 import { authenticationWrapper } from '../../modules/authentication';
 import { ApplicationState } from '../../store';
-import { loadGETheme } from '../../themes';
 import { ThemeContext } from '../../themes/theme-context';
 import { Mode } from '../../types/enums';
 import {
@@ -62,16 +61,6 @@ interface IAppState {
   sidebarTabSelection: string;
 }
 
-const getSystemTheme = (): string => {
-  if (
-    window.matchMedia &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches
-  ) {
-    return 'dark';
-  }
-  return 'light';
-};
-
 class App extends Component<IAppProps, IAppState> {
   private mediaQueryList = window.matchMedia('(max-width: 992px)');
 
@@ -119,12 +108,6 @@ class App extends Component<IAppProps, IAppState> {
     // Listens for messages from host document
     window.addEventListener('message', this.receiveMessage, false);
     this.handleSharedQueries();
-
-    // Load the theme from local storage or use the system theme as the default
-    const savedTheme = localStorage.getItem('appTheme') ?? getSystemTheme();
-    // @ts-ignore
-    this.props.actions.changeTheme(savedTheme);
-    loadGETheme(savedTheme); // TODO: Remove when cleaning up
   };
 
   public handleSharedQueries() {
@@ -193,8 +176,6 @@ class App extends Component<IAppProps, IAppState> {
   }
 
   private handleThemeChangeMsg = (msg: IThemeChangedMessage) => {
-    loadGETheme(msg.theme); // TODO: remove when done moving to fluent ui
-
     // @ts-ignore
     this.props.actions!.changeTheme(msg.theme);
   };

src/app/views/main-header/settings/ThemeChooser.tsx

@@ -4,7 +4,6 @@ import { useAppDispatch, useAppSelector } from '../../../../store';
 import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
 import { PopupsComponent } from '../../../services/context/popups-context';
 import { changeTheme } from '../../../services/slices/theme.slice';
-import { loadGETheme } from '../../../../themes';
 import { translateMessage } from '../../../utils/translate-messages';
 import { useIconOptionStyles, useRadioGroupStyles } from './ThemeChooser.styles';
 import { BrightnessHigh24Regular, WeatherMoon24Regular, DarkTheme24Regular} from '@fluentui/react-icons';
@@ -27,34 +26,18 @@ const availableThemes = [
   }
 ];
 
-const getSystemTheme = (): string => {
-  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    return 'dark';
-  }
-  return 'light';
-};
-
 const ThemeChooser: React.FC<PopupsComponent<null>> = (props) => {
   const dispatch = useAppDispatch();
   const appTheme = useAppSelector(state=> state.theme);
   const iconOptionStyles = useIconOptionStyles();
   const radioGroupStyles = useRadioGroupStyles();
 
-  useEffect(() => {
-    // Load the theme from local storage or use the system theme as the default
-    const savedTheme = localStorage.getItem('appTheme') ?? getSystemTheme();
-    dispatch(changeTheme(savedTheme));
-    loadGETheme(savedTheme); // Remove when cleaning up
-  }, [dispatch]);
-
-
   const handleChangeTheme = (selectedTheme: { key: string; displayName: string; icon: JSX.Element }) => {
     const newTheme: string = selectedTheme.key;
     // Save the selected theme to local storage
-    localStorage.setItem('appTheme', newTheme);
+    localStorage.setItem('CURRENT_THEME', newTheme);
     // Applies the theme to the Fluent UI components
     dispatch(changeTheme(newTheme));
-    loadGETheme(newTheme); //Remove when cleaning up
     telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT, {
       ComponentName: componentNames.SELECT_THEME_BUTTON,
       SelectedTheme: newTheme.replace('-', ' ').toSentenceCase()

src/app/views/sidebar/history/History.tsx

@@ -198,7 +198,7 @@ const HistoryItems = (props: HistoryProps)=>{
   'Today'.split('').forEach(ch=> openHistoryItems.add(ch))
   openHistoryItems.add('Today')
 
-  const styles = useStyles()
+  const itemStyles = useStyles()
 
   const [openItems, setOpenItems] = useState<Set<TreeItemValue>>(
     () => openHistoryItems
@@ -318,11 +318,11 @@ const HistoryItems = (props: HistoryProps)=>{
                   aria-posinset={historyLeafs.findIndex((q) => q.createdAt === h.createdAt) + 1}
                 >
                   <TreeItemLayout
-                    className={styles.historyTreeItemLayout}
+                    className={itemStyles.historyTreeItemLayout}
                     onClick={()=>handleViewQuery(h)}
                     iconBefore={<HistoryStatusCodes status={h.status} method={h.method}/>}
                     aside={
-                      <div data-history-aside className={styles.historyAsideIcons}>
+                      <div data-history-aside className={itemStyles.historyAsideIcons}>
                         <HistoryItemActionMenu item={h}/>
                         {isInCollection(h) ? (
                           <Tooltip

src/index.tsx

@@ -28,7 +28,6 @@ import { store } from './store';
 import './styles/index.scss';
 import { telemetry } from './telemetry';
 import ITelemetry from './telemetry/ITelemetry';
-import { loadGETheme } from './themes';
 import { IDevxAPI } from './types/devx-api';
 import { Mode } from './types/enums';
 import { IHistoryItem } from './types/history';
@@ -38,7 +37,7 @@ import { Collection } from './types/resources';
 const appRoot: HTMLElement = document.getElementById('root')!;
 initializeIcons();
 
-let currentTheme = readFromLocalStorage(CURRENT_THEME) || 'light';
+let currentTheme = readFromLocalStorage(CURRENT_THEME);
 export function removeSpinners() {
   // removes the loading spinner from GE html after the app is loaded
   const spinner = document.getElementById('spinner');
@@ -56,16 +55,17 @@ export function removeSpinners() {
   appRoot.classList.remove('hidden');
 }
 
-function setCurrentSystemTheme(): void {
+function setCurrentTheme(): void {
   const themeFromLocalStorage = readFromLocalStorage(CURRENT_THEME);
 
   if (themeFromLocalStorage) {
     currentTheme = themeFromLocalStorage;
   } else {
     currentTheme = getOSTheme();
+    localStorage.setItem('CURRENT_THEME', currentTheme);
   }
 
-  applyCurrentSystemTheme(currentTheme);
+  applyCurrentTheme(currentTheme);
 }
 function getOSTheme(): string {
   let currentSystemTheme: string;
@@ -88,14 +88,13 @@ function getOSTheme(): string {
   return currentSystemTheme;
 }
 
-function applyCurrentSystemTheme(themeToApply: string): void {
-  loadGETheme(themeToApply);
+function applyCurrentTheme(themeToApply: string): void {
   appStore.dispatch(changeTheme(themeToApply));
 }
 
 const appStore: any = store;
 
-setCurrentSystemTheme();
+setCurrentTheme();
 appStore.dispatch(getGraphProxyUrl());
 
 function refreshAccessToken() {
@@ -116,7 +115,6 @@ setInterval(refreshAccessToken, 1000 * 60 * 10); // refresh access token every 1
 const theme = new URLSearchParams(location.search).get('theme');
 
 if (theme) {
-  loadGETheme(theme);
   appStore.dispatch(changeTheme(theme));
   appStore.dispatch(setGraphExplorerMode(Mode.TryIt));
 } else {