diff --git a/src/components/DocumentCard/DocumentCard.css b/src/components/DocumentCard/DocumentCard.css
index 191eaa74..10dc0dcb 100644
--- a/src/components/DocumentCard/DocumentCard.css
+++ b/src/components/DocumentCard/DocumentCard.css
@@ -26,24 +26,24 @@
box-sizing: border-box;
display: flex;
height: 56px;
+ justify-content: space-between;
width: 200px;
+ line-height: 120%;
flex-wrap: wrap;
- padding-left: 8px;
+ padding: 12px 3px 12px 8px;
position: relative;
background-color: var(--gray-200);
}
-.document-card-actions {
- position: absolute;
- top: 10px;
- right: 1px;
+.document-card-actions button.unstyled.icon-only {
+ height: 38px;
+ width: 38px;
}
.document-card-name {
font-family: Inter;
- font-size: 16px;
+ font-size: 14px;
font-weight: 500;
- width: 90%;
display: -webkit-box;
line-clamp: 2;
overflow: hidden;
diff --git a/src/components/DocumentCard/DocumentCardActions.tsx b/src/components/DocumentCard/DocumentCardActions.tsx
index 52d681ec..1f285abb 100644
--- a/src/components/DocumentCard/DocumentCardActions.tsx
+++ b/src/components/DocumentCard/DocumentCardActions.tsx
@@ -68,7 +68,7 @@ export const DocumentCardActions = (props: DocumentCardActionsProps) => {
diff --git a/src/components/DocumentLibrary/DocumentLibrary.tsx b/src/components/DocumentLibrary/DocumentLibrary.tsx
index ebffe2f9..22e838c9 100644
--- a/src/components/DocumentLibrary/DocumentLibrary.tsx
+++ b/src/components/DocumentLibrary/DocumentLibrary.tsx
@@ -24,6 +24,7 @@ import { PublicWarningMessage } from './PublicWarningMessage';
import { DocumentTable } from './DocumentTable';
import { CollectionDocumentActions } from './CollectionDocumentActions';
import { CheckCircle } from '@phosphor-icons/react';
+import { LoadingOverlay } from '@components/LoadingOverlay';
export type LibraryDocument = Pick<
Document,
@@ -61,6 +62,8 @@ export interface DocumentLibraryProps {
isAdmin: boolean | undefined;
}
+const DOCUMENTS_PER_FETCH = 1000;
+
export const DocumentLibrary = (props: DocumentLibraryProps) => {
const { t } = props.i18n;
const { UploadActions } = props;
@@ -83,6 +86,7 @@ export const DocumentLibrary = (props: DocumentLibraryProps) => {
Document | undefined
>();
const [publicWarningOpen, setPublicWarningOpen] = useState(false);
+ const [loading, setLoading] = useState(false);
const handleTogglePrivate = (document: Document) => {
if (document.is_private) {
@@ -176,13 +180,45 @@ export const DocumentLibrary = (props: DocumentLibraryProps) => {
useEffect(() => {
async function getDocuments() {
- const resp = await supabase
+ setLoading(true);
+ const countResp = await supabase
.from('documents')
- .select(
- 'id,created_at,created_by,updated_at,updated_by,name,bucket_id,content_type,meta_data, is_private, collection_id, collection_metadata'
+ .select('*', { count: 'exact', head: true });
+
+ if (countResp.error) {
+ console.log('Error retrieving document count');
+ setLoading(false);
+ setDocuments([]);
+ } else {
+ let docs: LibraryDocument[] = [];
+
+ let start = 0;
+ const iterations = Math.ceil(
+ (countResp?.count || 0) / DOCUMENTS_PER_FETCH
);
+ for (let i = 0; i < iterations; i++) {
+ const docsResp = await supabase
+ .from('documents')
+ .select(
+ 'id,created_at,created_by,updated_at,updated_by,name,bucket_id,content_type,meta_data, is_private, collection_id, collection_metadata'
+ )
+ .range(start, start + DOCUMENTS_PER_FETCH - 1);
+
+ if (docsResp.error) {
+ console.error('Error retrieving documents: ', docsResp.error);
+
+ setLoading(false);
+ setDocuments(docs);
+ return;
+ }
- setDocuments(resp.data);
+ docs = [...docs, ...docsResp.data];
+ start += DOCUMENTS_PER_FETCH;
+ }
+
+ setLoading(false);
+ setDocuments(docs);
+ }
}
if (!documents) {
@@ -574,6 +610,7 @@ export const DocumentLibrary = (props: DocumentLibraryProps) => {
return (
<>
+ {loading && props.open &&
}
diff --git a/src/components/LoadingOverlay/LoadingOverlay.css b/src/components/LoadingOverlay/LoadingOverlay.css
index 38fa06ef..cfb784af 100644
--- a/src/components/LoadingOverlay/LoadingOverlay.css
+++ b/src/components/LoadingOverlay/LoadingOverlay.css
@@ -2,11 +2,11 @@
align-items: center;
background-color: rgba(255, 255, 255, 0.75);
display: flex;
- height: 100%;
+ height: 100vh;
justify-content: center;
left: 0;
- position: absolute;
+ position: fixed;
top: 0;
- width: 100%;
+ width: 100vw;
z-index: 99999;
-}
\ No newline at end of file
+}
diff --git a/src/components/Notifications/Notifications.css b/src/components/Notifications/Notifications.css
index 53bee0de..10ddf354 100644
--- a/src/components/Notifications/Notifications.css
+++ b/src/components/Notifications/Notifications.css
@@ -17,8 +17,8 @@ button.unstyled.icon-only.notification-actions-trigger {
height: 1tpx;
line-height: 15px;
position: absolute;
- right: -5px;
- top: -5px;
+ right: 0;
+ top: 0;
width: 15px;
}
diff --git a/src/components/OwnerPill/OwnerPill.css b/src/components/OwnerPill/OwnerPill.css
index 72b65329..5ca93230 100644
--- a/src/components/OwnerPill/OwnerPill.css
+++ b/src/components/OwnerPill/OwnerPill.css
@@ -1,11 +1,17 @@
.owner-pill {
- width: 75px;
- height: 24px;
- border-radius: 12px;
- gap: 4px;
+ align-items: center;
background-color: var(--gray-200);
+ border-radius: 100vw;
display: flex;
flex-direction: row;
+ gap: 4px;
justify-content: center;
- align-items: center;
+ padding: 0 0.625rem 0 0.375rem;
+ line-height: 200%;
+}
+
+.owner-pill svg {
+ flex: 0 0 auto;
+ height: 14px;
+ width: 14px;
}
diff --git a/src/components/Presence/PresenceStack.tsx b/src/components/Presence/PresenceStack.tsx
index 0e1cd1fd..aec2d148 100644
--- a/src/components/Presence/PresenceStack.tsx
+++ b/src/components/Presence/PresenceStack.tsx
@@ -3,10 +3,10 @@ import type { PresentUser } from '@annotorious/react';
import { animated, useTransition } from '@react-spring/web';
import * as Popover from '@radix-ui/react-popover';
import * as Tooltip from '@radix-ui/react-tooltip';
+import { getDisplayName } from '@components/AnnotationDesktop';
import { Avatar } from '@components/Avatar';
import './PresenceStack.css';
-import { getDisplayName } from '@components/AnnotationDesktop';
interface PresenceStackProps {
diff --git a/src/components/ProjectCard/JoinProjectDialog.css b/src/components/ProjectCard/JoinProjectDialog.css
index 0f7c2246..4bac809d 100644
--- a/src/components/ProjectCard/JoinProjectDialog.css
+++ b/src/components/ProjectCard/JoinProjectDialog.css
@@ -1,18 +1,4 @@
.join-project-dialog-button-container {
display: flex;
justify-content: space-between;
-}
-
-.join-project-dialog-button-join {
- min-height: 34px;
- height: 34px;
- background-color: var(--dark-blue);
- color: var(--gray-100);
-}
-
-.join-project-dialog-button-cancel {
- min-height: 34px;
- height: 34px;
- background-color: var(--gray-300);
- color: var(--gray-900);
-}
+}
\ No newline at end of file
diff --git a/src/components/ProjectCard/JoinProjectDialog.tsx b/src/components/ProjectCard/JoinProjectDialog.tsx
index f8dd212b..1594ee99 100644
--- a/src/components/ProjectCard/JoinProjectDialog.tsx
+++ b/src/components/ProjectCard/JoinProjectDialog.tsx
@@ -35,13 +35,13 @@ export const JoinProjectDialog = (props: JoinProjectDialogProps) => {