<commit_before>import React from 'react';
import IconButton from '@mui/material/IconButton';
import Slider from '@mui/material/Slider';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import HistoryIcon from '@mui/icons-material/History';
import VolumeOffIcon from '@mui/icons-material/VolumeOff';
import AppTitle from '../HeaderBar/AppTitle';
import SongTitle from '../SongTitle';
import LoadingIndicator from './LoadingIndicator';
import Filler from './Filler';

function noop() {}

function FakeVolume() {
  return (
    <div className="VolumeSlider">
      <IconButton onClick={noop}>
        <VolumeOffIcon />
      </IconButton>
      <div className="VolumeSlider-slider">
        <Slider
          size="small"
          min={0}
          max={100}
          step={1}
          value={0}
          onChange={noop}
        />
      </div>
    </div>
  );
}

const fakeSongTitle = (
  <SongTitle
    artist={<Filler width={200} />}
    title={<Filler width={300} />}
  />
);

function FakeHeaderBar() {
  return (
    <div className="HeaderBar App-header">
      <AppTitle className="HeaderBar-title">...</AppTitle>
      <div className="HeaderBar-nowPlaying">
        <div className="HeaderBar-media">
          {fakeSongTitle}
        </div>
        <div className="HeaderBar-dj">
          <Filler width={300} />
        </div>
      </div>
      <div className="HeaderBar-volume">
        <FakeVolume />
      </div>
      <div className="HeaderBar-history">
        <IconButton className="HistoryButton">
          <HistoryIcon className="HistoryButton-icon" />
        </IconButton>
      </div>
    </div>
  );
}

function FakeFooterBar() {
  return <div />;
}

const tabClasses = {
  root: 'SidePanel-tab',
  wrapper: 'SidePanel-tabLabel',
};

function DesktopSkeleton() {
  return (
    <div className="App">
      <div className="AppColumn AppColumn--left">
        <div className="AppRow AppRow--top">
          <FakeHeaderBar />
        </div>
        <div className="AppRow AppRow--middle">
          <LoadingIndicator />
        </div>
        <div className="AppRow AppRow--bottom">
          <FakeFooterBar />
        </div>
      </div>
      <div className="AppColumn AppColumn--right">
        <Tabs
          value={0}
          variant="fullWidth"
          classes={{
            root: 'SidePanel-tabs',
            indicator: 'SidePanel-indicator',
          }}
        >
          <Tab classes={tabClasses} label={<Filler width={70} />} />
          <Tab classes={tabClasses} label={<Filler width={70} />} />
          <Tab classes={tabClasses} label={<Filler width={100} />} />
        </Tabs>

        <div className="SidePanel-panel is-selected">
          <div className="ChatContainer">
            <div className="ChatContainer-messages">
              <div className="ChatMessage ChatMessage--motd">
                <div className="ChatMessage-content">
                  <Filler width={400} />
                </div>
              </div>
            </div>
            <div className="ChatContainer-input ChatInputWrapper">
              <div className="ChatInput">
                <input className="ChatInput-input" type="text" disabled />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default DesktopSkeleton;
<commit_msg>Fix side panel style in loading skeleton (#2310)<commit_after>import React from 'react';
import IconButton from '@mui/material/IconButton';
import Slider from '@mui/material/Slider';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import HistoryIcon from '@mui/icons-material/History';
import VolumeOffIcon from '@mui/icons-material/VolumeOff';
import AppTitle from '../HeaderBar/AppTitle';
import SongTitle from '../SongTitle';
import LoadingIndicator from './LoadingIndicator';
import Filler from './Filler';

function noop() {}

function FakeVolume() {
  return (
    <div className="VolumeSlider">
      <IconButton onClick={noop}>
        <VolumeOffIcon />
      </IconButton>
      <div className="VolumeSlider-slider">
        <Slider
          size="small"
          min={0}
          max={100}
          step={1}
          value={0}
          onChange={noop}
        />
      </div>
    </div>
  );
}

const fakeSongTitle = (
  <SongTitle
    artist={<Filler width={200} />}
    title={<Filler width={300} />}
  />
);

function FakeHeaderBar() {
  return (
    <div className="HeaderBar App-header">
      <AppTitle className="HeaderBar-title">...</AppTitle>
      <div className="HeaderBar-nowPlaying">
        <div className="HeaderBar-media">
          {fakeSongTitle}
        </div>
        <div className="HeaderBar-dj">
          <Filler width={300} />
        </div>
      </div>
      <div className="HeaderBar-volume">
        <FakeVolume />
      </div>
      <div className="HeaderBar-history">
        <IconButton className="HistoryButton">
          <HistoryIcon className="HistoryButton-icon" />
        </IconButton>
      </div>
    </div>
  );
}

function FakeFooterBar() {
  return <div />;
}

const tabClasses = {
  root: 'SidePanel-tab',
  wrapper: 'SidePanel-tabLabel',
};

function DesktopSkeleton() {
  return (
    <div className="App">
      <div className="AppColumn AppColumn--left">
        <div className="AppRow AppRow--top">
          <FakeHeaderBar />
        </div>
        <div className="AppRow AppRow--middle">
          <LoadingIndicator />
        </div>
        <div className="AppRow AppRow--bottom">
          <FakeFooterBar />
        </div>
      </div>
      <div className="AppColumn AppColumn--right">
        <div className="SidePanels">
          <Tabs
            value={0}
            variant="fullWidth"
            classes={{
              root: 'SidePanel-tabs',
              indicator: 'SidePanel-indicator',
            }}
          >
            <Tab classes={tabClasses} label={<Filler width={70} />} />
            <Tab classes={tabClasses} label={<Filler width={70} />} />
            <Tab classes={tabClasses} label={<Filler width={100} />} />
          </Tabs>

          <div className="SidePanel-panel is-selected">
            <div className="ChatContainer">
              <div className="ChatContainer-messages">
                <div className="ChatMessage ChatMessage--motd">
                  <div className="ChatMessage-content">
                    <Filler width={400} />
                  </div>
                </div>
              </div>
              <div className="ChatContainer-input ChatInputWrapper">
                <div className="ChatInput">
                  <input className="ChatInput-input" type="text" disabled />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default DesktopSkeleton;

{'fraction_non_alphanumeric': 0.14698584148299518, 'fraction_numerical': 0.00817398919865713, 'mean_word_length': 2.078167115902965, 'pattern_counts': {'":': 0, '<': 145, '<?xml version=': 0, '>': 145, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2266548', 'n_tokens_mistral': 1990, 'n_tokens_neox': 1940, 'n_words': 408}