Pinned Messages (#2081)

* add pinned room events hook

* room pinned message - WIP

* add room event hook

* fetch pinned messages before displaying

* use react-query in room event hook

* disable staleTime and gc to 1 hour in room event hook

* use room event hook in reply component

* render pinned messages

* add option to pin/unpin messages

* remove message base from message placeholders and add variant

* display message placeholder while loading pinned messages

* render pinned event error

* show no pinned message placeholder

* fix message placeholder flickering

src/app/components/message/placeholder/CompactPlaceholder.tsx

@@ -1,22 +1,27 @@
-import React from 'react';
-import { as, toRem } from 'folds';
+import React, { useMemo } from 'react';
+import { as, ContainerColor, toRem } from 'folds';
 import { randomNumberBetween } from '../../../utils/common';
 import { LinePlaceholder } from './LinePlaceholder';
-import { CompactLayout, MessageBase } from '../layout';
+import { CompactLayout } from '../layout';
 
-export const CompactPlaceholder = as<'div'>(({ ...props }, ref) => (
-  <MessageBase>
-    <CompactLayout
-      {...props}
-      ref={ref}
-      before={
-        <>
-          <LinePlaceholder style={{ maxWidth: toRem(50) }} />
-          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }} />
-        </>
-      }
-    >
-      <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(120, 500)) }} />
-    </CompactLayout>
-  </MessageBase>
-));
+export const CompactPlaceholder = as<'div', { variant?: ContainerColor }>(
+  ({ variant, ...props }, ref) => {
+    const nameSize = useMemo(() => randomNumberBetween(40, 100), []);
+    const msgSize = useMemo(() => randomNumberBetween(120, 500), []);
+
+    return (
+      <CompactLayout
+        {...props}
+        ref={ref}
+        before={
+          <>
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(nameSize) }} />
+          </>
+        }
+      >
+        <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msgSize) }} />
+      </CompactLayout>
+    );
+  }
+);