fix: project empty state flicker (#4609)

This commit is contained in:
Anmol Singh Bhatia 2024-05-27 19:25:31 +05:30 committed by GitHub
parent 6825f8a386
commit a8fcaf1f48
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 3 deletions

View File

@ -16,9 +16,11 @@ export const ProjectCardList = observer(() => {
// store hooks
const { toggleCreateProjectModal } = useCommandPalette();
const { setTrackElement } = useEventTracker();
const { workspaceProjectIds, filteredProjectIds, getProjectById } = useProject();
const { workspaceProjectIds, filteredProjectIds, getProjectById, loader } = useProject();
const { searchQuery, currentWorkspaceDisplayFilters } = useProjectFilter();
if (!filteredProjectIds || !workspaceProjectIds || loader) return <ProjectsLoader />;
if (workspaceProjectIds?.length === 0 && !currentWorkspaceDisplayFilters?.archived_projects)
return (
<EmptyState
@ -30,8 +32,6 @@ export const ProjectCardList = observer(() => {
/>
);
if (!filteredProjectIds) return <ProjectsLoader />;
if (filteredProjectIds.length === 0)
return (
<div className="grid h-full w-full place-items-center">

View File

@ -14,6 +14,7 @@ import { RootStore } from "../root.store";
export interface IProjectStore {
// observables
loader: boolean;
projectMap: {
[projectId: string]: IProject; // projectId: project Info
};
@ -47,6 +48,7 @@ export interface IProjectStore {
export class ProjectStore implements IProjectStore {
// observables
loader: boolean = false;
projectMap: {
[projectId: string]: IProject; // projectId: project Info
} = {};
@ -62,6 +64,7 @@ export class ProjectStore implements IProjectStore {
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observables
loader: observable.ref,
projectMap: observable,
// computed
filteredProjectIds: computed,
@ -208,15 +211,18 @@ export class ProjectStore implements IProjectStore {
*/
fetchProjects = async (workspaceSlug: string) => {
try {
this.loader = true;
const projectsResponse = await this.projectService.getProjects(workspaceSlug);
runInAction(() => {
projectsResponse.forEach((project) => {
set(this.projectMap, [project.id], project);
});
this.loader = false;
});
return projectsResponse;
} catch (error) {
console.log("Failed to fetch project from workspace store");
this.loader = false;
throw error;
}
};