Merge pull request #1506 from TouK/NU-1746-fix-lazy-loading-animation

fix: window lazy loading animation
TouK · Jul 25, 2024 · 24b4192 · 24b4192
2 parents 83a10fc + 5a14fcf
commit 24b4192
Showing 1 changed file with 44 additions and 45 deletions.
diff --git a/src/components/window/WindowFrame.tsx b/src/components/window/WindowFrame.tsx
@@ -277,55 +277,54 @@ export const WindowFrame = forwardRef((props: PropsWithChildren<WindowFrameProps
   useScrollFix(ref.current);
 
   return (
-    <>
+    <div ref={windowRef} style={{ height: "100%" }}>
       {/*fallback animation for lazy loaded content*/}
       <CSSTransition nodeRef={ref} in={contentAvailable} timeout={250} classNames={fadeInAnimation}>
         <CSSTransition in={maximized} timeout={250} classNames={zoomAnimation} onEnter={onEnter} onExited={onExited}>
-            <Rnd
-              disableDragging={maximized || !moveable}
-              enableResizing={resizable && !maximized}
-              className={cx(windowClass, windowTheme)}
-              style={{ display: "flex", zIndex }} // override default inline-block
-              bounds="parent"
-              size={size}
-              position={maximized ? { x: 0, y: 0 } : position}
-              minWidth={currentMinWidth}
-              minHeight={currentMinHeight}
-              maxHeight={maxSize.height}
-              maxWidth={maxSize.width}
-              onResizeStop={onResizeStop}
-              onDrag={onDrag}
-              onMouseDown={touch}
-              onDragStart={touch}
-              onResizeStart={touch}
-              onDragStop={onDragStop}
-              dragHandleClassName={DRAG_HANDLE_CLASS_NAME}
-              cancel={`a[href], textarea, input, select, button, ${DRAG_PREVENT_CLASS_NAME}`}
-              data-testid="window-frame"
-            >
-              {/* trap keyboard focus within group (windows opened since last modal) */}
-              <FocusLock ref={windowRef} className={css({ flex: 1 })} group={focusGroup} disabled={!focusGroup}
-                         returnFocus autoFocus>
-                <div
-                  ref={ref}
-                  onFocus={focus}
-                  onBlur={blur}
-                  onKeyDown={(event) => {
-                    event.key === "Escape" && onEscape?.();
-                    touch();
-                  }}
-                  tabIndex={-1}
-                  className={cx(focusWrapperClass, focusWrapperTheme)}
-                  data-testid="window"
-                >
-                  {props.children}
-                </div>
-              </FocusLock>
-            </Rnd>
+          <Rnd
+            disableDragging={maximized || !moveable}
+            enableResizing={resizable && !maximized}
+            className={cx(windowClass, windowTheme)}
+            style={{ display: "flex", zIndex }} // override default inline-block
+            bounds="parent"
+            size={size}
+            position={maximized ? { x: 0, y: 0 } : position}
+            minWidth={currentMinWidth}
+            minHeight={currentMinHeight}
+            maxHeight={maxSize.height}
+            maxWidth={maxSize.width}
+            onResizeStop={onResizeStop}
+            onDrag={onDrag}
+            onMouseDown={touch}
+            onDragStart={touch}
+            onResizeStart={touch}
+            onDragStop={onDragStop}
+            dragHandleClassName={DRAG_HANDLE_CLASS_NAME}
+            cancel={`a[href], textarea, input, select, button, ${DRAG_PREVENT_CLASS_NAME}`}
+            data-testid="window-frame"
+          >
+            {/* trap keyboard focus within group (windows opened since last modal) */}
+            <FocusLock className={css({ flex: 1 })} group={focusGroup} disabled={!focusGroup} returnFocus autoFocus>
+              <div
+                ref={ref}
+                onFocus={focus}
+                onBlur={blur}
+                onKeyDown={(event) => {
+                  event.key === "Escape" && onEscape?.();
+                  touch();
+                }}
+                tabIndex={-1}
+                className={cx(focusWrapperClass, focusWrapperTheme)}
+                data-testid="window"
+              >
+                {props.children}
+              </div>
+            </FocusLock>
+          </Rnd>
         </CSSTransition>
-    </CSSTransition>
-  <SnapMask previewBox={snapPreviewBox} />
-    </>
+      </CSSTransition>
+      <SnapMask previewBox={snapPreviewBox} />
+    </div>
   );
 });