feat(replays): Make the ReplayCurrentUrl area appear disabled when loading (#34909)

Before: The CurrentUrl area is missing, and there's an extra thick line at the top of the player area.

After: We get the textbox & button displayed, with the normal disabled styles. No tooltip appears for the button.

static/app/components/forms/textCopyInput.tsx

@@ -44,6 +44,7 @@ type Props = {
    */
   children: string;
   className?: string;
+  disabled?: boolean;
   onCopy?: (value: string, event: React.MouseEvent) => void;
   /**
    * Always show the ending of a long overflowing text in input
@@ -93,7 +94,7 @@ class TextCopyInput extends Component<Props> {
   };
 
   render() {
-    const {className, style, children, rtl} = this.props;
+    const {className, disabled, style, children, rtl} = this.props;
 
     /**
      * We are using direction: rtl; to always show the ending of a long overflowing text in input.
@@ -110,6 +111,7 @@ class TextCopyInput extends Component<Props> {
         <OverflowContainer>
           <StyledInput
             readOnly
+            disabled={disabled}
             ref={this.textRef}
             style={style}
             value={inputValue}
@@ -118,7 +120,11 @@ class TextCopyInput extends Component<Props> {
           />
         </OverflowContainer>
         <Clipboard hideUnsupported value={children}>
-          <StyledCopyButton type="button" onClick={this.handleCopyClick}>
+          <StyledCopyButton
+            type="button"
+            disabled={disabled}
+            onClick={this.handleCopyClick}
+          >
             <IconCopy />
           </StyledCopyButton>
         </Clipboard>

static/app/components/replays/replayCurrentUrl.tsx

@@ -12,7 +12,7 @@ import getCurrentUrl from 'sentry/utils/replays/getCurrentUrl';
 function ReplayCurrentUrl() {
   const {currentTime, replay} = useReplayContext();
   if (!replay) {
-    return null;
+    return <UrlCopyInput disabled>{''}</UrlCopyInput>;
   }
 
   return <UrlCopyInput>{getCurrentUrl(replay, currentTime)}</UrlCopyInput>;
@@ -20,12 +20,15 @@ function ReplayCurrentUrl() {
 
 const UrlCopyInput = styled(TextCopyInput)`
   ${StyledInput} {
-    background: white;
+    background: ${p => p.theme.white};
     border: none;
     padding: 0 ${space(0.75)};
     font-size: ${p => p.theme.fontSizeMedium};
     border-bottom-left-radius: 0;
   }
+  ${StyledInput}[disabled] {
+    border: none;
+  }
 
   ${StyledCopyButton} {
     border-top: none;