fix(web): missing loading animation on project import when there's empty project list [VIZ-2289] [VIZ-2290] (#1837)

Author: airslice

web/src/app/features/Dashboard/ContentsContainer/Projects/hooks.ts

@@ -258,14 +258,23 @@ export default (workspaceId?: string) => {
     };
   }, [wrapperRef, contentRef]);
 
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleImportCompleted = useCallback(() => {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, [fileInputRef]);
+
   const {
     importStatus,
     handleProjectImport,
     handleProjectImportErrorDownload,
     handleProjectImportErrorClose
   } = useProjectImport({
     workspaceId,
-    refetchProjectList: refetch
+    refetchProjectList: refetch,
+    onImportCompleted: handleImportCompleted
   });
 
   // project remove
@@ -306,6 +315,7 @@ export default (workspaceId?: string) => {
     contentWidth,
     starredProjects,
     importStatus,
+    fileInputRef,
     projectVisibility,
     showProjectCreator,
     closeProjectCreator,

web/src/app/features/Dashboard/ContentsContainer/Projects/index.tsx

@@ -11,7 +11,7 @@ import ManagerEmptyContent from "@reearth/app/ui/components/ManagerBase/ManagerE
 import { ProjectImportStatus } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
-import { FC, useMemo, useRef, Fragment } from "react";
+import { FC, useMemo, Fragment } from "react";
 
 import useHooks from "./hooks";
 import ProjectGridViewItem from "./Project/ProjectGridViewItem";
@@ -32,6 +32,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
     searchTerm,
     sortValue,
     importStatus,
+    fileInputRef,
     projectVisibility,
     showProjectCreator,
     closeProjectCreator,
@@ -61,7 +62,9 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
     [t]
   );
 
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const hasImportingProject =
+    importStatus === ProjectImportStatus.Processing ||
+    importStatus === ProjectImportStatus.Uploading;
 
   return (
     <ManagerWrapper
@@ -110,7 +113,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
         searchPlaceholder={t("Search project")}
         onSearch={handleSearch}
       />
-      {filtedProjects?.length ? (
+      {filtedProjects?.length || hasImportingProject ? (
         <ManagerContent data-testid="projects-manager-content">
           <ContentWrapper>
             <BreadcrumbContainer data-testid="projects-breadcrumb-container">
@@ -187,12 +190,11 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
                   layout={layout}
                   data-testid={`projects-group-${layout}`}
                 >
-                  {(importStatus === ProjectImportStatus.Processing ||
-                    importStatus === ProjectImportStatus.Uploading) &&
+                  {hasImportingProject &&
                     (layout === "grid" ? (
                       <ImportingCardContainer>
-                        <ImportCardPlaceholder />
-                        <ImportingCardFotter />
+                        <ImportingCardPlaceholder />
+                        <ImportingCardFooter />
                       </ImportingCardContainer>
                     ) : (
                       <ImportingListContainer />
@@ -364,44 +366,42 @@ const HiddenFileInput = styled("input")({
   display: "none"
 });
 
-const ImportingCardContainer = styled("div")(({ theme }) => ({
+const ImportingCardContainer = styled("div")(() => ({
   display: "flex",
-  flexDirection: "column",
-  gap: theme.spacing.small,
-  height: "218px",
-  "@media (max-width: 567px)": {
-    height: "171px"
-  }
+  flexDirection: "column"
 }));
 
 const shimmerEffect = {
   background:
-    "linear-gradient(90deg, #292929 0%, #474747 33.04%, #474747 58.56%, #292929 100.09%)",
+    "linear-gradient(90deg, #292929 0%, #474747 30%, #474747 60%, #292929 100%)",
   backgroundSize: "400% 100%",
-  animation: "shimmer 1.2s infinite ease-in-out",
+  animation: "shimmer 3s infinite linear",
   "@keyframes shimmer": {
-    "0%": { backgroundPosition: "-400px 0" },
-    "100%": { backgroundPosition: "400px 0" }
+    "0%": { backgroundPosition: "400% 0" },
+    "100%": { backgroundPosition: "0 0" }
   }
 };
 
 const ImportingListContainer = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: theme.spacing.small,
-  height: "25px",
+  height: "50px",
   borderRadius: theme.radius.normal,
   ...shimmerEffect
 }));
 
-const ImportCardPlaceholder = styled("div")(({ theme }) => ({
+const ImportingCardPlaceholder = styled("div")(({ theme }) => ({
   flex: 1,
   borderRadius: theme.radius.normal,
+  minHeight: "188px",
   ...shimmerEffect
 }));
 
-const ImportingCardFotter = styled("div")(({ theme }) => ({
-  height: "20px",
+const ImportingCardFooter = styled("div")(({ theme }) => ({
+  height: "18px",
+  marginTop: "7px",
+  marginBottom: "7px",
   borderRadius: theme.radius.normal,
   flexShrink: 0,
   ...shimmerEffect

web/src/app/features/Dashboard/ContentsContainer/Projects/useProjectImport.ts

@@ -9,10 +9,12 @@ import { ChangeEvent, useCallback, useEffect, useState } from "react";
 
 export default ({
   workspaceId,
-  refetchProjectList
+  refetchProjectList,
+  onImportCompleted
 }: {
   workspaceId?: string;
   refetchProjectList: () => void;
+  onImportCompleted?: () => void;
 }) => {
   const [, setNotification] = useNotification();
   const t = useT();
@@ -81,6 +83,7 @@ export default ({
                 : undefined
             );
             clearInterval(interval);
+            onImportCompleted?.();
             break;
           case ProjectImportStatus.Success:
             setNotification({
@@ -90,6 +93,7 @@ export default ({
             refetchProjectList();
             setImportStatus(ProjectImportStatus.None);
             clearInterval(interval);
+            onImportCompleted?.();
             break;
           case ProjectImportStatus.Processing:
           case ProjectImportStatus.Uploading:
@@ -108,6 +112,7 @@ export default ({
     refetchProjectList,
     refetchProject,
     setNotification,
+    onImportCompleted,
     t
   ]);
 

web/src/services/api/project/useProjectImportExportMutations.ts

@@ -152,7 +152,6 @@ export const useProjectImportExportMutations = () => {
           status: "uploaded",
           project_id: temporary_project
         };
-        setNotification({ type: "success", text: t("Upload completed.") });
       } catch (error) {
         setNotification({
           type: "error",

web/src/services/i18n/translations/en.yml

@@ -616,7 +616,6 @@ Successfully uninstalled plugin.: ''
 Failed to export project.: ''
 Successfully exported project!: ''
 Failed to upload the file.: ''
-Upload completed.: ''
 Failed to upload chunk 0.: ''
 Failed to import project.: ''
 Failed to create project.: ''

web/src/services/i18n/translations/ja.yml

@@ -580,7 +580,8 @@ Time: 時刻
 Time Zone: タイムゾーン
 Zoom Level Editor: ズームレベルエディター
 Member Limit Exceeded: メンバー上限を超えました
-This workspace has exceeded the member limit for its current plan. Editing is temporarily disabled for all members. Please ask the workspace owner to remove extra members or upgrade the plan to restore access.: このワークスペースは、現在のプランのメンバー上限を超えています。すべてのメンバーの編集が一時的に無効になっています。ワークスペースの所有者に、追加のメンバーを削除するか、プランをアップグレードしてアクセスを復元するよう依頼してください。
+This workspace has exceeded the member limit for its current plan. Editing is temporarily disabled for all members. Please ask the workspace owner to remove extra members or upgrade the plan to restore access.: >-
+  このワークスペースは、現在のプランのメンバー上限を超えています。すべてのメンバーの編集が一時的に無効になっています。ワークスペースの所有者に、追加のメンバーを削除するか、プランをアップグレードしてアクセスを復元するよう依頼してください。
 Failed to add one or more assets.: アセットの追加に失敗しました。
 Successfully added one or more assets.: アセットの追加に成功しました。
 Failed to delete one or more assets.: アセットの削除に失敗しました。
@@ -621,7 +622,6 @@ Successfully uninstalled plugin.: プラグインのアンインストールに
 Failed to export project.: プロジェクトのエクスポートに失敗しました。
 Successfully exported project!: プロジェクトのエクスポートに成功しました！
 Failed to upload the file.: ファイルのアップロードに失敗しました。
-Upload completed.: アップロードが完了しました。
 Failed to upload chunk 0.: チャンク 0 のアップロードに失敗しました。
 Failed to import project.: プロジェクトのインポートに失敗しました。
 Failed to create project.: プロジェクトの作成に失敗しました。