Browse Source

fix: Show skelton loader immediatly when a table is opened

pull/7063/head
Muhammed Mustafa 1 year ago
parent
commit
2d906e99b5
  1. 10
      packages/nc-gui/components/dashboard/TreeView/TableNode.vue
  2. 13
      packages/nc-gui/components/smartsheet/grid/Table.vue
  3. 14
      packages/nc-gui/components/tabs/Smartsheet.vue
  4. 62
      packages/nc-gui/composables/useTableNew.ts

10
packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@ -9,7 +9,7 @@ import { ProjectRoleInj, TreeViewInj, useNuxtApp, useRoles, useTabs } from '#imp
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
base: BaseType base: BaseType
table: TableType table: TableType & { isViewsLoading?: boolean }
sourceIndex: number sourceIndex: number
}>(), }>(),
{ sourceIndex: 0 }, { sourceIndex: 0 },
@ -174,7 +174,15 @@ const isTableOpened = computed(() => {
class="nc-sidebar-node-btn nc-sidebar-expand" class="nc-sidebar-node-btn nc-sidebar-expand"
@click.stop="onExpand" @click.stop="onExpand"
> >
<GeneralLoader
v-if="table.isViewsLoading"
class="flex w-4 h-4 !text-gray-600"
:class="{
'!visible': !isExpanded,
}"
/>
<GeneralIcon <GeneralIcon
v-else
icon="triangleFill" icon="triangleFill"
class="nc-sidebar-source-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90" class="nc-sidebar-source-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90"
:class="{ '!rotate-180': isExpanded }" :class="{ '!rotate-180': isExpanded }"

13
packages/nc-gui/components/smartsheet/grid/Table.vue

@ -142,7 +142,12 @@ const { getMeta } = useMetas()
const { addUndo, clone, defineViewScope } = useUndoRedo() const { addUndo, clone, defineViewScope } = useUndoRedo()
const { isViewColumnsLoading, updateGridViewColumn, gridViewCols, resizingColOldWith } = useViewColumnsOrThrow() const {
isViewColumnsLoading: _isViewColumnsLoading,
updateGridViewColumn,
gridViewCols,
resizingColOldWith,
} = useViewColumnsOrThrow()
const { isExpandedFormCommentMode } = storeToRefs(useConfigStore()) const { isExpandedFormCommentMode } = storeToRefs(useConfigStore())
@ -179,6 +184,8 @@ const fillHandle = ref<HTMLElement>()
const gridRect = useElementBounding(gridWrapper) const gridRect = useElementBounding(gridWrapper)
const isViewColumnsLoading = computed(() => _isViewColumnsLoading.value || !meta.value)
// #Permissions // #Permissions
const { isUIAllowed } = useRoles() const { isUIAllowed } = useRoles()
const hasEditPermission = computed(() => isUIAllowed('dataEdit') && !isLocked.value) const hasEditPermission = computed(() => isUIAllowed('dataEdit') && !isLocked.value)
@ -409,7 +416,9 @@ const dummyRowDataForLoading = computed(() => {
}) })
const showSkeleton = computed( const showSkeleton = computed(
() => disableSkeleton !== true && (isViewDataLoading.value || isPaginationLoading.value || isViewColumnsLoading.value), () =>
(disableSkeleton !== true && (isViewDataLoading.value || isPaginationLoading.value || isViewColumnsLoading.value)) ||
!meta.value,
) )
// #Grid // #Grid

14
packages/nc-gui/components/tabs/Smartsheet.vue

@ -171,21 +171,21 @@ watch([activeViewTitleOrId, activeTableId], () => {
<LazySmartsheetToolbar v-if="!isForm" /> <LazySmartsheetToolbar v-if="!isForm" />
<div class="flex flex-row w-full" style="height: calc(100% - var(--topbar-height))"> <div class="flex flex-row w-full" style="height: calc(100% - var(--topbar-height))">
<Transition name="layout" mode="out-in"> <Transition name="layout" mode="out-in">
<template v-if="meta"> <div class="flex flex-1 min-h-0 w-3/4">
<div class="flex flex-1 min-h-0 w-3/4"> <div class="h-full flex-1 min-w-0 min-h-0 bg-white">
<div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-white"> <LazySmartsheetGrid v-if="isGrid || !meta || !activeView" ref="grid" />
<LazySmartsheetGrid v-if="isGrid" ref="grid" />
<LazySmartsheetGallery v-else-if="isGallery" /> <template v-if="activeView && meta">
<LazySmartsheetGallery v-if="isGallery" />
<LazySmartsheetForm v-else-if="isForm && !$route.query.reload" /> <LazySmartsheetForm v-else-if="isForm && !$route.query.reload" />
<LazySmartsheetKanban v-else-if="isKanban" /> <LazySmartsheetKanban v-else-if="isKanban" />
<LazySmartsheetMap v-else-if="isMap" /> <LazySmartsheetMap v-else-if="isMap" />
</div> </template>
</div> </div>
</template> </div>
</Transition> </Transition>
</div> </div>
</div> </div>

62
packages/nc-gui/composables/useTableNew.ts

@ -58,7 +58,12 @@ export function useTableNew(param: { onTableCreate?: (tableMeta: TableType) => v
const tables = computed(() => baseTables.value.get(param.baseId) || []) const tables = computed(() => baseTables.value.get(param.baseId) || [])
const base = computed(() => bases.value.get(param.baseId)) const base = computed(() => bases.value.get(param.baseId))
const openTable = async (table: TableType) => { const openTable = async (
table: TableType & {
isMetaLoading?: boolean
isViewsLoading?: boolean
},
) => {
if (!table.base_id) return if (!table.base_id) return
let base = bases.value.get(table.base_id) let base = bases.value.get(table.base_id)
@ -82,24 +87,49 @@ export function useTableNew(param: { onTableCreate?: (tableMeta: TableType) => v
baseIdOrBaseId = route.value.params.baseId as string baseIdOrBaseId = route.value.params.baseId as string
} }
await getMeta(table.id as string, (route.value.params?.viewId as string) !== table.id) const navigateToTable = async () => {
if (openedViewsTab.value === 'view') {
await navigateTo({
path: `/${workspaceIdOrType}/${baseIdOrBaseId}/${table?.id}`,
query: route.value.query,
})
}
await loadViews({ tableId: table.id as string }) table.isViewsLoading = true
const views = viewsByTable.value.get(table.id as string) ?? [] try {
if (openedViewsTab.value !== 'view' && views.length && views[0].id) { await loadViews({ tableId: table.id as string })
// find the default view and navigate to it, if not found navigate to the first one
const defaultView = views.find((v) => v.is_default) || views[0]
await navigateTo({ const views = viewsByTable.value.get(table.id as string) ?? []
path: `/${workspaceIdOrType}/${baseIdOrBaseId}/${table?.id}/${defaultView.id}/${openedViewsTab.value}`, if (openedViewsTab.value !== 'view' && views.length && views[0].id) {
query: route.value.query, // find the default view and navigate to it, if not found navigate to the first one
}) const defaultView = views.find((v) => v.is_default) || views[0]
} else
await navigateTo({ await navigateTo({
path: `/${workspaceIdOrType}/${baseIdOrBaseId}/${table?.id}`, path: `/${workspaceIdOrType}/${baseIdOrBaseId}/${table?.id}/${defaultView.id}/${openedViewsTab.value}`,
query: route.value.query, query: route.value.query,
}) })
}
} catch (e) {
console.error(e)
} finally {
table.isViewsLoading = false
}
}
const loadTableMeta = async () => {
table.isMetaLoading = true
try {
await getMeta(table.id as string)
} catch (e) {
console.error(e)
} finally {
table.isMetaLoading = false
}
}
await Promise.all([navigateToTable(), loadTableMeta()])
} }
const createTable = async () => { const createTable = async () => {

Loading…
Cancel
Save