Fix space panel edge gradient not applying on load (#7644)

Author: t3chguy

src/components/structures/IndicatorScrollbar.tsx

@@ -18,6 +18,7 @@ import React, { ComponentProps, createRef } from "react";
 
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import { replaceableComponent } from "../../utils/replaceableComponent";
+import UIStore, { UI_EVENTS } from "../../stores/UIStore";
 
 interface IProps extends Omit<ComponentProps<typeof AutoHideScrollbar>, "onWheel"> {
     // If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator
@@ -35,8 +36,8 @@ interface IProps extends Omit<ComponentProps<typeof AutoHideScrollbar>, "onWheel
 }
 
 interface IState {
-    leftIndicatorOffset: number | string;
-    rightIndicatorOffset: number | string;
+    leftIndicatorOffset: string;
+    rightIndicatorOffset: string;
 }
 
 @replaceableComponent("structures.IndicatorScrollbar")
@@ -50,8 +51,8 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
         super(props);
 
         this.state = {
-            leftIndicatorOffset: 0,
-            rightIndicatorOffset: 0,
+            leftIndicatorOffset: '0',
+            rightIndicatorOffset: '0',
         };
     }
 
@@ -79,6 +80,7 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
 
     public componentDidMount(): void {
         this.checkOverflow();
+        UIStore.instance.on(UI_EVENTS.Resize, this.checkOverflow);
     }
 
     private checkOverflow = (): void => {
@@ -122,9 +124,8 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
     };
 
     public componentWillUnmount(): void {
-        if (this.scrollElement) {
-            this.scrollElement.removeEventListener("scroll", this.checkOverflow);
-        }
+        this.scrollElement?.removeEventListener("scroll", this.checkOverflow);
+        UIStore.instance.off(UI_EVENTS.Resize, this.checkOverflow);
     }
 
     private onMouseWheel = (e: React.WheelEvent): void => {

src/components/views/spaces/SpacePanel.tsx

@@ -18,14 +18,15 @@ import React, {
     ComponentProps,
     Dispatch,
     ReactNode,
+    RefCallback,
     SetStateAction,
     useCallback,
     useEffect,
     useLayoutEffect,
     useRef,
     useState,
 } from "react";
-import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
+import { DragDropContext, Draggable, Droppable, DroppableProvidedProps } from "react-beautiful-dnd";
 import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/models/room";
 
@@ -87,12 +88,6 @@ const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
     return [invites, metaSpaces, actualSpaces, activeSpace];
 };
 
-interface IInnerSpacePanelProps {
-    children?: ReactNode;
-    isPanelCollapsed: boolean;
-    setPanelCollapsed: Dispatch<SetStateAction<boolean>>;
-}
-
 export const HomeButtonContextMenu = ({
     onFinished,
     hideHeader,
@@ -260,8 +255,23 @@ const metaSpaceComponentMap: Record<MetaSpace, typeof HomeButton> = {
     [MetaSpace.Orphans]: OrphansButton,
 };
 
+interface IInnerSpacePanelProps extends DroppableProvidedProps {
+    children?: ReactNode;
+    isPanelCollapsed: boolean;
+    setPanelCollapsed: Dispatch<SetStateAction<boolean>>;
+    isDraggingOver: boolean;
+    innerRef: RefCallback<HTMLElement>;
+}
+
 // Optimisation based on https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md#recommended-droppable--performance-optimisation
-const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCollapsed, setPanelCollapsed }) => {
+const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({
+    children,
+    isPanelCollapsed,
+    setPanelCollapsed,
+    isDraggingOver,
+    innerRef,
+    ...props
+}) => {
     const [invites, metaSpaces, actualSpaces, activeSpace] = useSpaces();
     const activeSpaces = activeSpace ? [activeSpace] : [];
 
@@ -270,7 +280,14 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
         return <Component key={key} selected={activeSpace === key} isPanelCollapsed={isPanelCollapsed} />;
     });
 
-    return <div className="mx_SpaceTreeLevel">
+    return <IndicatorScrollbar
+        {...props}
+        wrappedRef={innerRef}
+        className="mx_SpaceTreeLevel"
+        style={isDraggingOver ? {
+            pointerEvents: "none",
+        } : undefined}
+    >
         { metaSpacesSection }
         { invites.map(s => (
             <SpaceItem
@@ -300,7 +317,7 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
         )) }
         { children }
         <CreateSpaceButton isPanelCollapsed={isPanelCollapsed} setPanelCollapsed={setPanelCollapsed} />
-    </div>;
+    </IndicatorScrollbar>;
 });
 
 const SpacePanel = () => {
@@ -352,21 +369,15 @@ const SpacePanel = () => {
                         </UserMenu>
                         <Droppable droppableId="top-level-spaces">
                             { (provided, snapshot) => (
-                                <IndicatorScrollbar
+                                <InnerSpacePanel
                                     {...provided.droppableProps}
-                                    wrappedRef={provided.innerRef}
-                                    className="mx_SpacePanel_spaceTreeWrapper"
-                                    style={snapshot.isDraggingOver ? {
-                                        pointerEvents: "none",
-                                    } : undefined}
+                                    isPanelCollapsed={isPanelCollapsed}
+                                    setPanelCollapsed={setPanelCollapsed}
+                                    isDraggingOver={snapshot.isDraggingOver}
+                                    innerRef={provided.innerRef}
                                 >
-                                    <InnerSpacePanel
-                                        isPanelCollapsed={isPanelCollapsed}
-                                        setPanelCollapsed={setPanelCollapsed}
-                                    >
-                                        { provided.placeholder }
-                                    </InnerSpacePanel>
-                                </IndicatorScrollbar>
+                                    { provided.placeholder }
+                                </InnerSpacePanel>
                             ) }
                         </Droppable>