SHIMMER
nextjs切换页面丢失了loading加载页
前端|其它
发布于2024-05-31 最近修改2024-05-31
465
0
Shimmer

问题

在我使用nextjs14重构了自己的网站后,一直有一个问题存在,就是在本地开发的时候,切换页面会出现我配置的loading加载页,但是在我发布到线上后,loading加载页在切换页面的时候消失了。如此就导致,我的页面在css没有加载完成就展示,出现了页面布局错乱的问题。

产生原因

有查过很多文档,一开始总觉得是自己配置的问题,但我在查阅 nextjs官方 github 提交的 issue 发现,很多的人遇到和我一样的问题,细看发现是框架本身的问题,直到我发版时,官方都没有解决这个问题,所以考虑自己解决。

思路

使用高阶组件包裹页面组件,在页面组件没渲染完成时,展示loading加载,完成后切换到页面内容

具体实现

高阶组件的具体实现
javascript
复制代码
import React, { useState } from "react"; import Loading from "../../loading"; const withLoading = (WrappedComponent) => { const WithLoadingComponent = (props) => { const [isLoading, setIsLoading] = useState(true); const handleLoaded = () => { setIsLoading(false); }; return ( <> {isLoading && <Loading />} <WrappedComponent {...props} loading={isLoading} onLoaded={handleLoaded} /> </> ); }; // 设置 displayName 帮助调试 const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || "Component"; WithLoadingComponent.displayName = `WithLoading(${wrappedComponentName})`; return WithLoadingComponent; }; export default withLoading;
简单的hooks,页面loading结束时机
javascript
复制代码
import { useEffect } from "react"; import { sessionSet, sessionGet } from "@utils/local"; const useChangeLoading = (props) => { useEffect(() => { const isCache = sessionGet(`${props.name}_cache`); // 模拟一个异步加载过程 const timer = setTimeout( () => { props.onLoaded(); sessionSet(`${props.name}_cache`, true); }, isCache ? 1000 : 1500 ); // 最少加载时间 return () => clearTimeout(timer); }, []); return null; }; export default useChangeLoading;
目录